Question

我试图让一张桌子调整其宽度和单元格的宽度，当它包含它的div大小时。因此，当帧宽度减小时，表格宽度会减小，从而使所有单元格保持相同的大小。

<div id="page">
    <table id="menubar">
        <tbody>
            <tr>
                <a href="somewhere1.html"><td class="menu">MenuItem1</td></a>
                <a href="somewhere2.html"><td class="menu">MenuItem2</td></a>
                <a href="somewhere3.html"><td class="menu">MenuItem3</td></a>
            </tr>
        </tbody>
    </table>
</div>

我的CSS看起来像：

#page {
    background-color: #f0eae3;
    max-width: 960px;
    min-width: 450px;
    margin: auto;
}

.menu {
    background-color: #ffffff;
    text-align: center;
    width: 310px;
}
#menubar {
    width: 960px
}

这可能很容易。

Answer 1

您需要将#menubar width更改为100%，以确保该表占用容器100%的{{1}}。如果您不希望表格大于#page，则可以将960px设置为max-width，以阻止它扩展太远。

960px

#page {
    background-color: #f0eae3;
    max-width: 960px;
    min-width: 450px;
    margin: auto;
}
#menubar {
    max-width: 960px;
    width: 100%;
}
.menu {
    background-color: #ffffff;
    text-align: center;
    max-width: 310px;
}

Answer 2

你有这样的

<table>
  <tr>
    <a href=""><td>1</td></a>
    <a href=""><td>2</td></a>
    <a href=""><td>3</td></a>
    <a href=""><td>4</td></a>
  </tr>
</table>

一定是这样

<table>
  <tr>
    <td><a href="">1</a></td>
    <td><a href="">2</a></td>
    <td><a href="">3</a></td>
    <td><a href="">4</a></td>
  </tr>
</table>

http://jsfiddle.net/njhqfnut/

#page {
    background-color: #f0eae3;
    max-width: 960px;
    min-width: 450px;
    margin: auto;
}

.menu {
    background-color: #ffffff;
    text-align: center;
    width: 310px;
}
#menubar {
    max-width: 960px
}

<div id="page">
    <table id="menubar">
        <tbody>
            <tr>
                <td class="menu"><a href="somewhere1.html">MenuItem1</a></td>
                <td class="menu"><a href="somewhere2.html">MenuItem2</a></td>
                <td class="menu"><a href="somewhere2.html">MenuItem3</a></td>
            </tr>
        </tbody>
    </table>
</div>

如何根据容器调整表的大小

2 个答案: