Question

我有一个以div为中心的单行表。其中两列（即单元格）填充了一个团队名称和一个圆形。我根本无法找到一种方法来使这些列的大小与例如团队名称。

HTML代码为：

<div id="greeting">    
 <table id="t03">
 <colgroup>
<col style="width: auto;">
<col style="width: auto;">
<col style="width: auto;">
<col style="width: auto;">

</colgroup>
<tr style= "height: 30px; width:auto;">
<td> Welcome, Team</td>
<td id="teamnamehere"></td>
<td> Please Make Your Decisions for Round</td>
<td id="roundnumberhere"></td>
</tr>
</table>
</div>

相应的CSS是：

#greeting {
    position: absolute;
    top: 385px;
    width: 980px;
    margin: auto; 
}

table#t03 {
width: 65%; 
margin: auto;
font-family:verdana;
font-size:18px;
font-color: #000000; 
background-color: #FFFFFF;
}

感谢您的帮助！

Answer 1

如果您从width: 65%;中删除table#t03，则其内容的宽度将会有效。

Answer 2

问题来自于尝试将表用于错误的目的 - 它们只应用于真正需要表格布局才能理解的数据。改为使用两个div，并在CSS中使它们成为内联块： -

div { display : inline-block}

这将在一行上并排显示它们，并允许div将其大小调整为文本长度。

它具有响应性的额外优势，因此如果您有一个特别长的名称或文字太大而无法放在手机屏幕上，第二个div将自动降至下面一行！

将CSS列宽限制为变量长度

2 个答案: