为什么我的上 table 不遵守 css 宽度规则？

Question

我有一组简单的两个 table 我想排队，但出于某种原因，上面的那个虽然与第二个规则相同但不想遵守宽度规则。

这里是 HTML:

<body>
    <div>
        <div class="clientSearchWrapper">
            <table class="clientSearchTableHeader">
                <tr>
                    <td colspan="6">Client Search</td>
                    <td colspan="2"></td>
                </tr>
                <tr>
                    <td class="clientNumber"><input type="text" /></td>
                    <td class="clientName"><input type="text" /></td>
                    <td class="clientAddress"><input type="text" /></td>
                    <td class="clientCity"><input type="text" /></td>
                    <td class="clientState"><input type="text" /></td>
                    <td class="clientZip"><input type="text" /></td>
                    <td class="clientMarket"><input type="text" /></td>
                    <td class="clientActive"><input type="text" /></td>
                </tr>
            </table>
            <div class="clientInfoWrapper">
                <table class="clientSearchTable">
                    <tr>
                        <td class="clientNumber">ClientNumber</td>
                        <td class="clientName">CompanyName</td>
                        <td class="clientAddress">CompanyAddress</td>
                        <td class="clientCity">CompanyCity</td>
                        <td class="clientState">CompanyState</td>
                        <td class="clientZip">CompanyZip</td>
                        <td class="clientMarket">Market</td>
                        <td class="clientActive">ClientActive</td>
                    </tr>
                    <tr>
                        <td class="clientNumber">ClientNumber</td>
                        <td class="clientName">CompanyName</td>
                        <td class="clientAddress">CompanyAddress</td>
                        <td class="clientCity">CompanyCity</td>
                        <td class="clientState">CompanyState</td>
                        <td class="clientZip">CompanyZip</td>
                        <td class="clientMarket">Market</td>
                        <td class="clientActive">ClientActive</td>
                    </tr>
                    <tr>
                        <td class="clientNumber">ClientNumber</td>
                        <td class="clientName">CompanyName</td>
                        <td class="clientAddress">CompanyAddress</td>
                        <td class="clientCity">CompanyCity</td>
                        <td class="clientState">CompanyState</td>
                        <td class="clientZip">CompanyZip</td>
                        <td class="clientMarket">Market</td>
                        <td class="clientActive">ClientActive</td>
                    </tr>
                    <tr>
                        <td class="clientNumber">ClientNumber</td>
                        <td class="clientName">CompanyName</td>
                        <td class="clientAddress">CompanyAddress</td>
                        <td class="clientCity">CompanyCity</td>
                        <td class="clientState">CompanyState</td>
                        <td class="clientZip">CompanyZip</td>
                        <td class="clientMarket">Market</td>
                        <td class="clientActive">ClientActive</td>
                    </tr>
                    <tr>
                        <td class="clientNumber">ClientNumber</td>
                        <td class="clientName">CompanyName</td>
                        <td class="clientAddress">CompanyAddress</td>
                        <td class="clientCity">CompanyCity</td>
                        <td class="clientState">CompanyState</td>
                        <td class="clientZip">CompanyZip</td>
                        <td class="clientMarket">Market</td>
                        <td class="clientActive">ClientActive</td>
                    </tr>
                    <tr>
                        <td class="clientNumber">ClientNumber</td>
                        <td class="clientName">CompanyName</td>
                        <td class="clientAddress">CompanyAddress</td>
                        <td class="clientCity">CompanyCity</td>
                        <td class="clientState">CompanyState</td>
                        <td class="clientZip">CompanyZip</td>
                        <td class="clientMarket">Market</td>
                        <td class="clientActive">ClientActive</td>
                    </tr>
                    <tr>
                        <td class="clientNumber">ClientNumber</td>
                        <td class="clientName">CompanyName</td>
                        <td class="clientAddress">CompanyAddress</td>
                        <td class="clientCity">CompanyCity</td>
                        <td class="clientState">CompanyState</td>
                        <td class="clientZip">CompanyZip</td>
                        <td class="clientMarket">Market</td>
                        <td class="clientActive">ClientActive</td>
                    </tr>
                    <tr>
                        <td class="clientNumber">ClientNumber</td>
                        <td class="clientName">CompanyName</td>
                        <td class="clientAddress">CompanyAddress</td>
                        <td class="clientCity">CompanyCity</td>
                        <td class="clientState">CompanyState</td>
                        <td class="clientZip">CompanyZip</td>
                        <td class="clientMarket">Market</td>
                        <td class="clientActive">ClientActive</td>
                    </tr>
                    <tr>
                        <td class="clientNumber">ClientNumber</td>
                        <td class="clientName">CompanyName</td>
                        <td class="clientAddress">CompanyAddress</td>
                        <td class="clientCity">CompanyCity</td>
                        <td class="clientState">CompanyState</td>
                        <td class="clientZip">CompanyZip</td>
                        <td class="clientMarket">Market</td>
                        <td class="clientActive">ClientActive</td>
                    </tr>
                    <tr>
                        <td class="clientNumber">ClientNumber</td>
                        <td class="clientName">CompanyName</td>
                        <td class="clientAddress">CompanyAddress</td>
                        <td class="clientCity">CompanyCity</td>
                        <td class="clientState">CompanyState</td>
                        <td class="clientZip">CompanyZip</td>
                        <td class="clientMarket">Market</td>
                        <td class="clientActive">ClientActive</td>
                    </tr>
                    <tr>
                        <td class="clientNumber">ClientNumber</td>
                        <td class="clientName">CompanyName</td>
                        <td class="clientAddress">CompanyAddress</td>
                        <td class="clientCity">CompanyCity</td>
                        <td class="clientState">CompanyState</td>
                        <td class="clientZip">CompanyZip</td>
                        <td class="clientMarket">Market</td>
                        <td class="clientActive">ClientActive</td>
                    </tr>
                    <tr>
                        <td class="clientNumber">ClientNumber</td>
                        <td class="clientName">CompanyName</td>
                        <td class="clientAddress">CompanyAddress</td>
                        <td class="clientCity">CompanyCity</td>
                        <td class="clientState">CompanyState</td>
                        <td class="clientZip">CompanyZip</td>
                        <td class="clientMarket">Market</td>
                        <td class="clientActive">ClientActive</td>
                    </tr>
                    <tr>
                        <td class="clientNumber">ClientNumber</td>
                        <td class="clientName">CompanyName</td>
                        <td class="clientAddress">CompanyAddress</td>
                        <td class="clientCity">CompanyCity</td>
                        <td class="clientState">CompanyState</td>
                        <td class="clientZip">CompanyZip</td>
                        <td class="clientMarket">Market</td>
                        <td class="clientActive">ClientActive</td>
                    </tr>
                    <tr>
                        <td class="clientNumber">ClientNumber</td>
                        <td class="clientName">CompanyName</td>
                        <td class="clientAddress">CompanyAddress</td>
                        <td class="clientCity">CompanyCity</td>
                        <td class="clientState">CompanyState</td>
                        <td class="clientZip">CompanyZip</td>
                        <td class="clientMarket">Market</td>
                        <td class="clientActive">ClientActive</td>
                    </tr>
                    <tr>
                        <td class="clientNumber">ClientNumber</td>
                        <td class="clientName">CompanyName</td>
                        <td class="clientAddress">CompanyAddress</td>
                        <td class="clientCity">CompanyCity</td>
                        <td class="clientState">CompanyState</td>
                        <td class="clientZip">CompanyZip</td>
                        <td class="clientMarket">Market</td>
                        <td class="clientActive">ClientActive</td>
                    </tr>
                    <tr>
                        <td class="clientNumber">ClientNumber</td>
                        <td class="clientName">CompanyName</td>
                        <td class="clientAddress">CompanyAddress</td>
                        <td class="clientCity">CompanyCity</td>
                        <td class="clientState">CompanyState</td>
                        <td class="clientZip">CompanyZip</td>
                        <td class="clientMarket">Market</td>
                        <td class="clientActive">ClientActive</td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</body>

这里是 CSS:

body
{
    background-color: #fff;

    width: 1200px;

    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

    position:absolute; 
    top:0;
    bottom:0;
    left:0;
    right:0;
    z-index:-1;
}

.clientSearchWrapper
{
    display: inline-block;
    width: 100%;
    margin: auto;
    padding-left: 0;
    padding-right: 0;
}

.clientSearchTableHeader
{
    width: 100%; /*Have also tried to set width to 1200px, just like in the body*/
    margin: auto;
    padding-left: 0;
    padding-right: 0;
    border-collapse: collapse;
}

.clientInfoWrapper
{
    height: 200px;
    overflow-y: auto;
    border: 2px inset #888;
}

.clientSearchTable
{
    width: 100%;
    margin: auto;
    padding-left: 0;
    padding-right: 0;
    border-collapse: collapse;
}

.clientSearchTable td
{
    padding-left: 5px;
    padding-right: 5px;
}

.clientSearchTable td.titleBar
{

}

.clientSearchTable td.recordCount
{

}

.clientSearchTable td.clientNumber
{
    border-right: 1px solid #000;
    text-align: center;
}

.clientSearchTable td.clientName
{
    border-right: 1px solid #000;
}

.clientSearchTable td.clientAddress
{
    border-right: 1px solid #000;
}

.clientSearchTable td.clientCity
{
    border-right: 1px solid #000;
}

.clientSearchTable td.clientState
{
    border-right: 1px solid #000;
    text-align: center;
}

.clientSearchTable td.clientZip
{
    border-right: 1px solid #000;
}

.clientSearchTable td.clientMarket
{
    border-right: 1px solid #000;
    text-align: center;
}

.clientSearchTable td.clientActive
{

}

如您所见，在 <table class="clientSearchTableHeader"> 元素中，使用 css 规则 width，我明确告诉它将宽度设置为 100%（就像我所做的那样在 <table class="clientSearchTable"> 元素及其父元素 <div class=clientInfoWrapper"> 元素中。我尝试用像素 (1200px) 指定，甚至将 !important 添加到 css 规则（不是它反正有任何其他的否决它。<table class="clientSearchTableHeader"> 元素坚持将自己设置为 1400 像素（甚至比 <body> 元素大 200 像素的宽度。我确信我可以明确地告诉 <td> 设置宽度，或 <input> 元素，或两者兼而有之，但我想尽可能保持动态，另外，我不必使用较低的 table (<table class="clientSearchTable">)。只是想知道这里发生了什么以及为什么 css 中 table 和 class "clientSearchTable" 的宽度规则被忽略了。

我做错了什么？

这是 jsfiddle：https://jsfiddle.net/1fhtk4sw/4/

Answer 1

将此添加到您的 css。您的输入字段默认为浏览器设置的宽度。它正在将 table 内容推到 1200px 以上。

.clientSearchTableHeader input { width: 100%; }

为什么我的上 table 不遵守 css 宽度规则？

Why is my upper table not obeying the css width rule?

html

css

width