精準控制表格列表(table-layout:fixed)

時間 2019-11-20

標籤精準控制表格列表 table layout fixed 简体版

原文原文鏈接

如今面臨的問題：html

對於元素的display的屬性使用表格的形式，能夠使元素有表格的行爲，但對於不固定寬度的的元素，進行佈局也會很難控制。這是由於列寬會對錶格進行相應的調整，即便指定了相應的寬度，也只是能起到相似的效果。算法

解決方案：ide

table-layout的屬性。它的默認值是atuo，其行爲模式被自動錶格佈局算法，也是表格佈局行爲。它還具備另外一個值fixed，這個值能夠明顯可控一些。這個fixed屬性成爲固定表格佈局算法。經過如下例子對比一下：佈局

1.默認表格值spa

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>默認</title>
    <style>
        table{
            width: 500px;
            height: 80px;
        }
    </style>
</head>
<body>
<table border="1" cellspacing="0"  >
    <tr>
        <td>若是咱們不……</td>
        <td>指定的單元格的寬度，則這些單元格會根據內容的
            寬度的長短來分析表格的寬度。也就是說內容較長的分配的寬度就會多一些</td>
    </tr>
    <tr>
        <td>表格的每一行都會參與到列寬的計算，並且不只是第一行</td>
        <td>
            這個結果和上面的那個是不同的
        </td>
    </tr>
</table>
</body>
</html>

View Code

2使用table-layout：fixed屬性code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>table-layout: fixed</title>
    <style>
        table{
            width: 500px;
            height: 80px;
            table-layout: fixed;
        }
    </style>
</head>
<body>
<table border="1" cellspacing="0"  >
    <tr>
        <td>若是咱們不……</td>
        <td>指定的單元格的寬度，則這些單元格會根據內容的
            寬度的長短來分析表格的寬度。也就是說內容較長的分配的寬度就會多一些</td>
    </tr>
    <tr>
        <td>表格的每一行都會參與到列寬的計算，並且不只是第一行</td>
        <td>
            這個結果和上面的那個是不同的
        </td>
    </tr>
</table>
</body>
</html>

View Code

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。