制作一个 td 固定大小（宽度，高度），而其余的 td 可以扩展

Posted 2023-03-05

【中文标题】制作一个 td 固定大小（宽度，高度），而其余的 td 可以扩展

【英文标题】：Make a td fixed size (width,height) while rest of td's can expand

【发布时间】：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  style="white-space:nowrap;" >NHS Number</td>
            <td >&#160;</td>
            <td   style="white-space:nowrap;">Date of Visit</td>
            <td >&#160;</td>
            <td colspan="3" style="white-space:nowrap;">Care Time Started</td>
            <td >&#160;</td>
            <td >&#160;</td>
            <td  rowspan="2" style="font-weight:bold;vertical-align:middle;white-space:nowrap;">Tick when<br/> care starts</td>
        </tr>
        <tr >
            <td  class="tableContainerRow2">&#160;0123456789</td>
            <td >&#160;</td>
            <td  class="tableContainerRow2">&#160;12/12/09</td>
            <td >&#160;</td>
            <td  class="tableContainerRow2">&#160;12</td>
            <td  >&#160;:</td>
            <td  class="tableContainerRow2">&#160;10</td>                       
            <td >&#160;</td>
            <td >&#160;&#9745;</td>
            <td  >&#160;</td>
        </tr>
    </table>
</div>

【参考方案1】：

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

<td ></td>

【讨论】：

使用 CSS 会更好（对于一些更好的值），但原则是一样的：内联样式，或分配给元素的 id/class 都可以。

感谢您的评论，我想我没有粘贴任何代码没有帮助，但这个解决方案没有奏效，也许是我做错了什么。

你的桌子很重，所有指定的宽度。尝试删除所有样式并从头开始。不要使用换行。只需调整标题行单元格，不要使用空格 nowrap 样式。使用另一个表格代替 colspan="3"，这样您就可以显示与使用 colspan="3" 的表格对齐的列。您也在使用百分比，这没关系，但是您是否尝试将您想要固定的百分比设置为特定的像素宽度？当事情变得复杂时，表格总是让我感到痛苦。开始一次删除一个东西来调试它们。

【参考方案2】：

这将处理空的 td：

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