Question

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

这是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％（正如我在{{1}中所做的那样} element及其父元素<table class="clientSearchTable">元素。我已经尝试使用像素（1200px）进行指定，甚至将<div class=clientInfoWrapper">添加到css规则中（并不是说它还有其他任何东西可以覆盖它）。{ {1}}元素坚持将自身设置为1400像素（宽度比!important元素宽200像素。我确信我可以明确告诉<table class="clientSearchTableHeader">设置宽度，或<body>元素，或两者兼而有之，但我希望保持这个更具动态性，如果可能的话，加上我不必使用下表（<td>）。只是想知道这里发生了什么以及为什么忽略具有“clientSearchTable”类的表的css中的宽度规则。

我做错了什么？

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

Answer 1

将此添加到您的CSS。您的输入字段默认为浏览器设置的宽度。它正在推动表格内容超过1200px。

.clientSearchTableHeader输入{ 宽度：100％; }

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

1 个答案: