【问题标题】:Make a td fixed size (width,height) while rest of td's can expand制作一个 td 固定大小(宽度,高度),而其余的 td 可以扩展
【发布时间】:2011-01-06 07:19:37
【问题描述】:

你知道吗,如何固定表格中 td 的宽度和高度的大小,以使表格中的 td 的其余部分根据需要扩展?

问题是,当td里面有数据的时候,它不会比数据收缩得更多,但是如果是空的,它会一直收缩,如果你扩大窗口,td就会扩大。

我想保持 td 的大小,无论你是扩大还是缩小窗口,以及 td 里面是否有数据。

我还需要保持 td 的其余部分能够在您展开窗口时展开。

类 tableContainerRow2 是我需要它是固定大小的那个。 例如

<style>
    .divContainer {
        margin:10px;
        background-color:#C7D8EE;
        border:2px solid #0076BF;
        text-align:left;    
    }

    .tableContainer {
        color:#0076BF;
        margin: -10px 0px -10px 0px;
        border-spacing: 10px;
        empty-cells:show;
        width:90%;
    }

    .tableContainerRow2 {
        background-color:white;
        border:2px solid #0076BF;
    }
</style>

<div class="divContainer">
    <table class="tableContainer" cellspacing="10px">
        <tr>
            <td width="18%" style="white-space:nowrap;" >NHS Number</td>
            <td width="17%">&#160;</td>
            <td width="10%"  style="white-space:nowrap;">Date of Visit</td>
            <td width="10%">&#160;</td>
            <td colspan="3" style="white-space:nowrap;">Care Time Started</td>
            <td width="4%">&#160;</td>
            <td width="5%">&#160;</td>
            <td width="25%" rowspan="2" style="font-weight:bold;vertical-align:middle;white-space:nowrap;">Tick when<br/> care starts</td>
        </tr>
        <tr >
            <td width="18%" class="tableContainerRow2">&#160;0123456789</td>
            <td width="17%">&#160;</td>
            <td width="10%" class="tableContainerRow2">&#160;12/12/09</td>
            <td width="10%">&#160;</td>
            <td width="5%" class="tableContainerRow2">&#160;12</td>
            <td width="1%" >&#160;:</td>
            <td width="5%" class="tableContainerRow2">&#160;10</td>                       
            <td width="4%">&#160;</td>
            <td width="5%">&#160;&#9745;</td>
            <td width="10%" >&#160;</td>
        </tr>
    </table>
</div>

【问题讨论】:

    标签: html html-table alignment


    【解决方案1】:

    只需设置要固定的 td/列的宽度,其余的将展开。

    <td width="200"></td>
    

    【讨论】:

    • 使用 CSS 会更好(对于一些更好的值),但原则是一样的:内联样式,或分配给元素的 id/class 都可以。
    • 感谢您的评论,我想我没有粘贴任何代码没有帮助,但这个解决方案没有奏效,也许是我做错了什么。
    • 你的桌子很重,所有指定的宽度。尝试删除所有样式并从头开始。不要使用换行。只需调整标题行单元格,不要使用空格 nowrap 样式。使用另一个表格代替 colspan="3",这样您就可以显示与使用 colspan="3" 的表格对齐的列。您也在使用百分比,这没关系,但是您是否尝试将您想要固定的百分比设置为特定的像素宽度?当事情变得复杂时,表格总是让我感到痛苦。开始一次删除一个东西来调试它们。
    【解决方案2】:

    这将处理空的 td:

    <td style="min-width: 20px;"></td>
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2013-11-04
      • 1970-01-01
      • 2012-11-18
      • 2017-03-13
      • 2013-08-03
      • 2014-03-14
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多