鍍金池/ 問答/HTML/ table 加上cospan后寬度混亂問題

table 加上cospan后寬度混亂問題

直接貼代碼，要求很簡單，三列寬度指定，內(nèi)容超出部分顯示...。再無cospan的標(biāo)題列時(shí)，沒有問題，加上后，寬度被平均分配。

<!DOCTYPE html>
<html lang="zh-ch">

<head>
    <meta charset="UTF-8">
    <title>Table | Test</title>
    <style type="text/css">
    table.gridtable {
        width: 352px;
        font-family: verdana, arial, sans-serif;
        font-size: 12px;
        color: #333333;
        border-width: 1px;
        border-color: #666666;
        border-collapse: collapse;
        table-layout: fixed;
    }

    table.gridtable td {
        /*width: 100px;*/
        padding: 8px;
        border-width: 1px;
        border-style: solid;
        border-color: #666666;
        background-color: #ffffff;
        word-break: break-all;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    td.td-width-50 {
        width: 50px;
    }

    td.td-width-100 {
        width: 100px;
    }

    td.td-width-150 {
        width: 150px;
    }
    </style>
</head>

<body>
    <table class="gridtable">
        <!-- 加上如下cospan的標(biāo)題行后，表格寬度并未按照自己定義，而是平均分配 -->
        <tr>
            <td colspan="2">Info Header 1</td>
            <td>Info Header 2</td>
        </tr>
        <tr>
            <td class="td-width-50" title="Text 1A">Text 1A</td>
            <td class="td-width-100">Text 1B</td>
            <td class="td-width-150">Text 1C</td>
        </tr>
        <tr>
            <td class="td-width-50">Text 2B</td>
            <td class="td-width-100">Text 2B</td>
            <td class="td-width-150">Text 2C</td>
        </tr>
    </table>
</body>

</html>
回答
編輯回答
憶當(dāng)年

=-=第一行兩個(gè)套上td-width-150的class就行了……分析了一下，這樣最快

2017年6月1日 05:30
編輯回答
默念

表格不要指定寬度即可解決此問題。
More, td的width增加min-width和max-width就能解決兩個(gè)問題：

  1. td內(nèi)容撐爆單元格寬度的問題
  2. 容器寬度不夠時(shí)單元格寬度自動收縮的問題

最終代碼如下：

<!DOCTYPE html>
<html lang="zh-ch">

<head>
    <meta charset="UTF-8">
    <title>Table | Test</title>
    <style type="text/css">
    table.gridtable {
        font-family: verdana, arial, sans-serif;
        font-size: 12px;
        color: #333333;
        border-width: 1px;
        border-color: #666666;
        border-collapse: collapse;
        table-layout: fixed;
    }

    table.gridtable td {
        padding: 8px;
        border-width: 1px;
        border-style: solid;
        border-color: #666666;
        background-color: #ffffff;
        word-break: break-all;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    td.td-width-50 {
        width: 50px;
        min-width: 50px;
        max-width: 50px;
    }

    td.td-width-100 {
        width: 100px;
        min-width: 100px;
        max-width: 100px;
    }

    td.td-width-150 {
        width: 150px;
        min-width: 150px;
        max-width: 150px;
    }
    </style>
</head>

<body>
    <table class="gridtable">
        <!-- 加上如下cospan的標(biāo)題行后，表格寬度并未按照自己定義，而是平均分配 -->
        <tr>
            <td colspan="2">Info Header 1</td>
            <td>Info Header 2</td>
        </tr>
        <tr>
            <td class="td-width-50" title="Text 1A">Text 1A</td>
            <td class="td-width-100">Text 1B</td>
            <td class="td-width-150">Text 1C</td>
        </tr>
        <tr>
            <td class="td-width-50" title="Text 2BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB">Text 2BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB</td>
            <td class="td-width-100">Text 2B</td>
            <td class="td-width-100">Text 2C</td>
        </tr>
    </table>
</body>

</html>
2017年6月16日 12:56