html - css：使用 display:table 时如何更改表格大小？

Question

CSS

<style>
.featuresContainer { display: table; }
.featuresContent { display: table-row; }
.contentLeft {
    display: table-cell;
    width: 50%;
    background-color: red;
    vertical-align: middle;
    padding: 7px;
}

.contentRight {
    display: table-cell;
    width: 50%;
    background-color: blue;
    padding: 7px;
    vertical-align: middle;
}
</style>

html:

<div class="featuresContainer">
    <div class="featuresContent">
        <div class="contentLeft">
            <h3>Assignments Tool</h3>
            <ul>
                <li>Any type of assignment or assessment</li>
                <li>Quizzes</li>
                <li>Tests</li>
                <li>Polls</li>
                <li>Discussion Forum with tone meter</li>
            </ul>
        </div>
        <div class="contentRight">
            <img src="https://sandbox.velop.org/styles/default/velop/images/assingments_tool.png" />
        </div>
    </div>
    <div class="featuresContent">
        <div class="contentLeft">
            <img src="https://sandbox.velop.org/styles/default/velop/images/web_tool.png" />           
        </div>
        <div class="contentRight">
            <h3>Web Tool</h3>
            <ul>
                <li>Web link</li>
                <li>Any RSS feed</li>
                <li>Youtube and Vimeo integration and tracking</li>
            </ul>
        </div>
    </div>
</div>

问题：

如何改变表格的大小？我希望表格只是整个页面的一半宽度。我试过.featuresContainer { display: table; width:50%;}但它不起作用。

Answer 1

像这样使用table-layout: fixed;：

.featuresContainer { display: table; width:50%; table-layout: fixed;}