如何使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％宽度，文本在左边列为右对齐，左列中的文本为左对齐。我尝试了很多不同的选择，例如。 width：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屋！