如何用CSS控制表格每列的宽度？

html-css08

如何用CSS控制表格每列的宽度？,第1张

如果是简单的表格，直上直下没有跨列或者跨行的：

td { text-overflow:ellipsiswhite-space:nowrapoverflow:hidden} /* 设置不换行 省略号显示*/

然后只需要再给第一行的td分别加上class，例如：

<tr>

<td class="item1">单元格</td>

<td class="item2">单元格</td>

<td class="item3">单元格</td>

<td class="item4">单元格</td>

<td class="item5">单元格</td>

<td class="item6">单元格</td>

</tr>

然后，分别设置宽度

.item1 { width:20% }

....

.item6 { width:5% }

其他行同列的单元格会被撑开

比较复杂的有跨列或者跨行的表格，设置方法类似，但是就是要计算一下，比较麻烦。

<table>

<tr><td colspan='3'>这个单元格横跨3列</td>

<tr><td rowspan='2'>这个单元格纵跨两行</td>

</table>

这种涉及到 colspan, rowspan 复杂的表格，最好用可视化编辑器来做。

第一个表格

<table border="5" width="300" bordercolor="#ff0000">

    <tr>

        <td colspan="2">11</td>

        <td>11</td>

    </tr>

    <tr>

        <td>11</td>

        <td>11</td>

        <td>11</td>

    </tr>

    <tr>

        <td>11</td>

        <td colspan="2">11</td>

    </tr>

</table>

第二个表格

<table border="1" width="300" cellspacing="10" cellpadding="10" bordercolor="#ff0000">

    <tr>

        <td rowspan="2">

        <table border="1" width="100%" bordercolor="#0000ff">

            <tr>

                <td rowspan="2">33</td>

                <td>33</td>

                <td>33</td>

            </tr>

            <tr>

                <td>33</td>

                <td>33</td>

            </tr>

        </table>

        </td>

        <td>22</td>

        <td>22</td>

    </tr>

    <tr>

        <td>22</td>

        <td rowspan="2">

        <table border="1" width="100%" bordercolor="#555555">

            <tr>

                <td rowspan="2">66</td>

                <td>55</td>

                <td>55</td>

            </tr>

            <tr>

                <td colspan="2">55</td>

            </tr>

        </table>

        </td>

    </tr>

    <tr>

        <td>22</td>

        <td>22</td>

    </tr>

</table>