如何在 CSS 中制作具有相等列宽的表格? [英] How to make a table with equal column widths in CSS?
问题描述
我有一个包含如下表格的文档:
I have a document containing a table like this:
<table>
<tr>
<td>
Word
</td>
<td>
Definition
</td>
</tr>
<tr>
<td>
Word
</td>
<td>
Definition
</td>
</tr>
<tr>
<td>
Word
</td>
<td>
Definition
</td>
</tr>
</table>
使用 CSS,我需要将所有单元格设置为 50% 宽度,左列"中的文本右对齐,左列中的文本左对齐.我尝试了许多不同的选择,例如宽度:50%;text-align: left
,但结果总是不正常.结果应如下所示:
Using CSS, I need to set all of the cells to 50% width, with text in the left "column" being right-aligned and text in the left column being left-aligned. I've tried many different options, e.g. width: 50%; text-align: left
, but the results are always unusual. The results should look like this:
_________________________
| word | definition |
|____________|____________|
| word | definition |
|____________|____________|
- 我无法直接调整表格的实际代码.我只能修改 CSS 样式.
- 在<table>中制作等宽的列中的答案 不合适,因为我不知道页面的宽度,而且宽度可能会有所不同.
- I cannot adjust the table's actual code directly. I can only modify the CSS style.
- The answer in Make columns of equal width in <table> is not suitable, because I do not know the width of the page, and that width might vary.
如何在 CSS 中的两列表格中设置等宽单元格,所有内容都对齐中间?
How can I set equal-width cells in a two-column table in CSS with everything aligned to the middle?
推荐答案
您可以在您的桌子上设置 table-layout: fixed;
.使用它,您可以覆盖浏览器的自动列大小调整.然后您的浏览器将第一列的列宽设置为全部.
You can set table-layout: fixed;
on your table. Using this you can override the browser's automatic column resizing. Then your browser sets the column width of first column to all.
这篇关于如何在 CSS 中制作具有相等列宽的表格?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!