html:设置列宽

时间:2015-05-28 07:30:25

标签: html twitter-bootstrap

我想为每个列设置自定义。但由于一个未知的原因,如果我增加col 3大小,col 2大小减少。 有谁知道为什么会有这种行为?

<table class="table" style="table-layout: fixed;width:1165px">
    <thead>
        <th style="width:137px">Col 1</th>
        <th style="width:137px">Col 2</th>
        <th style="width:98px">Col 3</th>
        <th style="width:98px">Col 4</th>
        <th style="width:98px">Col 5</th>
        <th style="width:72px">Col 6</th>
        <th style="width:104px">Col 7</th>
        <th style="width:101px">Col 8</th>
        <th style="width:80px">Col 9</th>
        <th style="width:60px">Col 10</th>
    </thead>
</table>

感谢。

1 个答案:

答案 0 :(得分:1)

代码中所有列的宽度合计为985px(而不是1165px)。

不是使用像素使用固定宽度,而是使用百分比是有益的。除了其他优点之外,它还可以针对不同的屏幕尺寸重新调整尺寸。

例如......

<table class="table">
    <thead>
        <th style="width: 12%">Col 1</th>
        <th style="width: 12%">Col 2</th>
        <th style="width: 11%">Col 3</th>
        <th style="width: 11%">Col 4</th>
        <th style="width: 11%">Col 5</th>
        <th style="width: 10%">Col 6</th>
        <th style="width: 11%">Col 7</th>
        <th style="width: 10%">Col 8</th>
        <th style="width: 6%">Col 9</th>
        <th style="width: 6%">Col 10</th>
    </thead>
</table>

如果您希望表格本身具有固定的宽度,那么您只需将宽度样式添加到整个表格中:<table class="table" style="width: 1028px">(当然,更改为您正在寻找的宽度)。