代码之家  ›  专栏  ›  技术社区  ›  LukLed

使用<col width=“x*”/>设置比例列宽

  •  5
  • LukLed  · 技术社区  · 15 年前

    <col width="x*" /> :

    <table width="600px">
        <col width="1*" />
        <col width="2*" />
        <col width="3*" />
        <tbody>
            <tr>
                <td style="border: 1px solid black;">AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA
                </td>
                <td style="border: 1px solid black;">BBB BBB BBB BBB BBB BBB BBB BBB BBB BBB BBB BBB BBB BBB BBB BBB BBB BBB BBB BBB BBB BBB BBB BBB BBB BBB BBB BBB BBB BBB BBB BBB
                </td>
                <td style="border: 1px solid black;">CCC CCC CCC CCC CCC CCC CCC CCC CCC CCC CCC CCC CCC CCC CCC CCC CCC CCC CCC CCC CCC CCC CCC CCC CCC CCC CCC CCC CCC CCC CCC CCC
                </td>
            </tr>
        </tbody>
    </table>
    

    <col>

    3 回复  |  直到 7 年前
        1
  •  3
  •   carillonator    15 年前

    您可以使用17%、34%和49%。1:2:3

        2
  •  0
  •   Jan M    13 年前

    我试图让它在所有主流浏览器中都能工作,但也失败了。除了官方的规范,谷歌几乎没有提出什么。

        3
  •  0
  •   Brendan Gooden    6 年前

    你可以用 colgroup .

    从…起 WSSchools

    标记指定表中一组一列或多列 用于格式化。

    而不是为每个单元格、每行重复样式。

    table {
       width: 100%;
    }
    td {
       text-align: center;
    }
        <table>
            <colgroup>
                <col span="1" style="width: 15%;">
                <col span="1" style="width: 15%;">
                <col span="1" style="width: 70%;">
            </colgroup>
            <thead>
                <tr>
                    <th class="col_3">On stop credit</th>
                    <th class="col_3">Rating</th>
                    <th class="col_3">Customer Notes</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Value</td>
                    <td>Value</td>
                    <td>Long text value</td>
                </tr>
            </tbody>
        </table>