HTML 宽度 属性 在 Markdown 中不起作用
HTML width property does not work in Markdown
我正在使用 Markdown 中的 HTML 创建一个 table。
密码是
<table>
<thead>
<tr>
<th style="width:2px;text-align: center;background: #2c3e50;" ><font face="youyuan">Column1</font></th>
<th style="width:150px; text-align: center;background: #c3e50;" ><font face="youyuan">Column2</font></th>
<th style="text-align: center;background: #2c3e50;" ><font face="youyuan";>Column3</font></th>
</tr>
</thead>
<tbody>
...
</tbody>
</table>
background、text-align 等其他参数按预期工作。但是，列长度根本没有改变。三列等分。为什么 width 在这里不起作用以及如何解决这个问题？
A table 单元格默认没有滚动功能的溢出。因此，默认行为将导致单元格相应地调整大小以允许内容实际适合单元格。如果您删除内容 Column1 然后您会看到，该单元格的宽度仅为您声明的 2px。没有内容，单元格不会溢出，因此大小可以为 2px。
<table>
<thead>
<tr>
<th style="width: 2px; text-align: center; background: #2c3e50;"><font face="youyuan"></font></th>
<th style="width:150px; text-align: center;background: #c3e50;" ><font face="youyuan">Column2</font></th>
<th style="text-align: center;background: #2c3e50;" ><font face="youyuan";>Column3</font></th>
</tr>
</thead>
<tbody>
...
</tbody>
</table>
您可以使用 max-width 强制单元格仅具有给定的宽度。如果比较背景颜色，您可以看到应用了宽度。此外，单元格内容现在发生碰撞并清楚地证明第一个单元格仅具有给定的最大宽度。但是，由于 table 单元格既没有分词也没有滚动条，因此内容会相互冲突并显得混乱。
<table>
<thead>
<tr>
<th style="max-width: 20px; text-align: center; background: #2c3e50;"><font face="youyuan">Column1</font></th>
<th style="max-width:150px; text-align: center;background: #c3e50;" ><font face="youyuan">Column2</font></th>
<th style="text-align: center;background: #2c3e50;" ><font face="youyuan";>Column3</font></th>
</tr>
</thead>
<tbody>
...
</tbody>
</table>
在这种情况下，HTML 和 table 都没有问题，但是将较大的内容装入较小的容器的逻辑。 table 不是为了这样的目的，因为它也不是为了样式而只是以 table 格式保存和显示数据。出于样式目的，您有 css-grid.
我正在使用 Markdown 中的 HTML 创建一个 table。
密码是
<table>
<thead>
<tr>
<th style="width:2px;text-align: center;background: #2c3e50;" ><font face="youyuan">Column1</font></th>
<th style="width:150px; text-align: center;background: #c3e50;" ><font face="youyuan">Column2</font></th>
<th style="text-align: center;background: #2c3e50;" ><font face="youyuan";>Column3</font></th>
</tr>
</thead>
<tbody>
...
</tbody>
</table>
background、text-align 等其他参数按预期工作。但是，列长度根本没有改变。三列等分。为什么 width 在这里不起作用以及如何解决这个问题？
A table 单元格默认没有滚动功能的溢出。因此，默认行为将导致单元格相应地调整大小以允许内容实际适合单元格。如果您删除内容 Column1 然后您会看到，该单元格的宽度仅为您声明的 2px。没有内容，单元格不会溢出，因此大小可以为 2px。
<table>
<thead>
<tr>
<th style="width: 2px; text-align: center; background: #2c3e50;"><font face="youyuan"></font></th>
<th style="width:150px; text-align: center;background: #c3e50;" ><font face="youyuan">Column2</font></th>
<th style="text-align: center;background: #2c3e50;" ><font face="youyuan";>Column3</font></th>
</tr>
</thead>
<tbody>
...
</tbody>
</table>
您可以使用 max-width 强制单元格仅具有给定的宽度。如果比较背景颜色，您可以看到应用了宽度。此外，单元格内容现在发生碰撞并清楚地证明第一个单元格仅具有给定的最大宽度。但是，由于 table 单元格既没有分词也没有滚动条，因此内容会相互冲突并显得混乱。
<table>
<thead>
<tr>
<th style="max-width: 20px; text-align: center; background: #2c3e50;"><font face="youyuan">Column1</font></th>
<th style="max-width:150px; text-align: center;background: #c3e50;" ><font face="youyuan">Column2</font></th>
<th style="text-align: center;background: #2c3e50;" ><font face="youyuan";>Column3</font></th>
</tr>
</thead>
<tbody>
...
</tbody>
</table>
在这种情况下，HTML 和 table 都没有问题，但是将较大的内容装入较小的容器的逻辑。 table 不是为了这样的目的，因为它也不是为了样式而只是以 table 格式保存和显示数据。出于样式目的，您有 css-grid.