Detailed explanation of some settings for Table adaptation and overflow

1. Two properties of table reset:

①border-collapse: collapse; /* Set the merge border model for the table*/

②border-spacing: 0; /* Set the spacing between cells in the table to 0 */

Code:

<div class="fz">
    <div style="width: 600px;" class="bg-grey p10">
        <table class="bg-white">
            <tr>
                <th>Serial number</th>
                <th>Start time</th>
                <th>End time</th>
                <th>Remarks</th>
                <th>Operation</th>
            </tr>
            <tr>
                <td>1</td>
                <td>2014/8/2</td>
                <td>2015/1/1</td>
                <td>Where has the time gone?</td>
                <td><a href="#">Edit</a></td>
            </tr>
        </table>
    </div>
</div>

When only td is reset, th{padding:0} has no effect of setting borders

The effect of setting td{ border:1px solid #ff4136;}

The effect of setting table { border-collapse: collapse; border-spacing: 0; }

2. Single line overflow dot display

.ell { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }

Several necessary conditions are:

① Be sure to set the width of the element.

②white-space: nowrap; The white-space attribute sets how to handle the white space within an element. Nowrap text will not wrap, the text will continue on the same line until a <br> tag is encountered. (Prevents the text from stretching downward; even if you define a height, the ellipsis will not appear and the excess text will be clipped.)

③overflow: hidden; (to prevent text from expanding horizontally)

④text-overflow: ellipsis; ellipsis displays an ellipsis mark when the text in the object overflows (...)

3. Setting the width of the table

td{ border:1px solid #ff4136;}
.title{ width: 100px;}
.kaiyao{ width: 200px;}
.time{ width: 120px;}

<div class="fz">
    <div style="width: 800px;" class="bg-grey p10">
        <table class="bg-white pctW">
            <tr>
                <th class="title">Title</th>
                Summary
                <th class="time">Time</th>
            </tr>
            <tr>
                <td>Single line dot dot display</td>
                <td>It is said that Chrome 34+ supports responsive images, which means that by using specific attributes on the <img> tag, you can achieve automatic responsive acquisition of images. You can try it~</td>
                <td>2014-04-09 23:51</td>
            </tr>
            <tr>
                <td>Continuous characters wrap</td>
                <td>this is the first time I have visited a city in Beijing</td>
                <td>2014-04-09 23:53</td>
            </tr>
        </table>
    </div>
</div>

Operation effect:

Problem: Although the width of td is set, the text does not overflow due to the fluidity of the cell. And the width of the table is automatically calculated according to the cell content.

Solution: Add

table{ table-layout: fixed;}

Effect:

The purpose of table-layout: fixed is to make the table layout fixed.

Problem: Chinese does not overflow, but English overflows? The width set for the table still does not work?

Solution: Add .ell and .bk styles to the two cells of "Outline"

.cell_bk { display: table; width: 100%; table-layout: fixed; word-wrap: break-word; }
.bk { word-wrap: break-word; }

Operation effect:

Problem: The width set for the table still doesn't work? . After calculation, when the width of each td is set, the actual width of the cell is calculated as a proportion of the table width.

For example: the width of the table is 800px. The width of td are 100px 200px 100px respectively. In the case of table-layout:fixed. That is 1:2:1 ratio of 800

The actual td width is: 200px, 400px, 200px. If you do not want to calculate proportionally, you can use the following solution:

Solution: Delete the width limit class ".time" referenced by the last cell in the table.

Effect:

The widths of "Title" and "Summary" are set to 100px and 200px;

Summarize:

(1) To set the width of a table, the attribute that must be added is table-layout: fixed; without this attribute, even if the cell width is set, .ell and .bk will not work.

(2) After adding the table-layout: fixed attribute, the width of the cell is expressed as a percentage. ②When the cell width is expressed in px, do not set the width of the last cell.

4. Double-column adaptive cell part continuous English characters wrap

/*Continuous English characters wrap in double-column adaptive cell*/
.cell_bk { display: table; width: 100%; table-layout: fixed; word-wrap: break-word; }

Note that this is different from ordinary floating. The floating is wraparound, while this is double-column.

Code:

.cell{ display: table-cell; *display: inline-block;}

<div class="fz">
    <div style="width: 600px;" class="bg-grey p10">
        <div>
            <img src=" images/xxx.jpg" class="l p10" width="100">
            <div class="cell">
                <p class="cell_bk">
                    On this day in 1977, 28-year-old Lazio midfielder Luciano Re Cecconi and two friends walked into a jewelry store in Rome. For some reason, he suddenly wanted to play a spoof joke. As he entered the jewelry store, he yelled, "Freeze! Robbery!" His next and last two words, after the jewelry store owner rushed out and shot him, were, "It's a joke! It's a Joke!" Thirty minutes later, he was dead.
                    <br/><br/>
                    <span>//zxx:I am xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</span>
                    <h3>No processing</h3>
                </p>
            </div>
        </div>
    </div>
</div>

Effect: (compatible with all browsers)

The effect when setting the width of the image img to 200

Note: Only two columns are supported. There are issues with IE6/7 browsers when using three columns.

Compared with float, it can achieve a two-column effect, but it is not adaptive when the image width changes. You need to change the padding-left value of the right div at the same time.

<img src=" images/xxx.jpg" class="l p10" width="200">
      <div style="padding-left: 220px;">
              <p class="cell_bk"> 

This concludes this article on some detailed settings for Table adaptation and overflow. For more relevant content on Table adaptation and overflow, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!