Home > Web Front-end > CSS Tutorial > Detailed explanation of the application of table-layout:fixed in css

Detailed explanation of the application of table-layout:fixed in css

黄舟
Release: 2017-06-30 13:36:33
Original
2836 people have browsed it

Application scenario one:

When there is a long English text in the table, if table-layout:fixed or is not set word-break:break-all, then the width displayed by the cell is not the width we set, as follows:

<style>

    table{border:2px solid #ccc;width: 100%;text-align: center;border-collapse:collapse;/*table-layout: fixed;*/}
    td,th{height: 30px;border:2px solid #ccc;/*word-break: break-all;*/}

</style>
<table width="400" border="1" id="table1">
   <tr> 
      <td>3</td>
      <td width="10%">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
      <td width="20%">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
   </tr>
   <tr>
       <td>3</td>
       <td>4</td>
       <td>5</td>
   </tr>
</table>
Copy after login

In the above code, add table- to the table element layout: fixed; or add word-break: break-all to td, you can achieve the width display we set when installing the table:

table{border:2px solid #ccc;width: 100%;text-align: center;border-collapse:collapse;table-layout: fixed;}
td,th{height: 30px;border:2px solid #ccc;/*word-break: break-all;*/}
Copy after login
table{border:2px solid #ccc;width: 100%;text-align: center;border-collapse:collapse;/*table-layout: fixed;*/}
td,th{height: 30px;border:2px solid #ccc;word-break: break-all;}
Copy after login



Application scenario two:

General writing method of ellipsis in css:

white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
Copy after login

When you want to apply ellipsis in table:

<p style="margin-bottom: 7px;"><style><br/>    *{padding:0;margin:0;font-size: 12px;color: #333}<br/>    li{<a href="http://www.php.cn/wiki/953.html" target="_blank">list-style</a>: none;}<br/><br/>    table{border:2px solid #ccc;width: 100%;text-align: center;border-collapse:collapse;}<br/>    td,th{height: 30px;border:2px solid #ccc;word-break: break-all;}<br/><br/>    .ellipsis{white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}<br/></style><br/><br/><table width="400" border="1" id="table1"><br/>        <tr><br/>            <td>3</td><br/>            <td class="ellipsis" width="10%">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td><br/>            <td width="40%">5</td><br/>        </tr><br/>        <tr><br/>            <td>3</td><br/>            <td>4</td><br/>            <td>5</td><br/>        </tr><br/></table><br/></p>
Copy after login

The result is not what we want at all:

Solution: add table-layout: fixed;

<style>
    *{padding:0;margin:0;font-size: 12px;color: #333}
    li{list-style: none;}

    table{border:2px solid #ccc;width: 100%;text-align: center;border-collapse:collapse;table-layout: fixed;}
    td,th{height: 30px;border:2px solid #ccc;word-break: break-all;}

    .ellipsis{white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
</style>

<table width="400" border="1" id="table1">
        <tr>
            <td>3</td>
            <td class="ellipsis" width="10%">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
            <td width="40%">5</td>
        </tr>
        <tr>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
</table>
Copy after login

The effect is exactly what we want:


The above codes are all compatible with ie6+

The above is the detailed content of Detailed explanation of the application of table-layout:fixed in css. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template