我有一个简单的两个表，我想排队，但由于某种原因，上面的一个，虽然有相同的规则作为第二个不想遵守宽度规则。
下面是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 class="clientSearchTable">)。只是想知道这里发生了什么，为什么css中的宽度规则与类"clientSearchTable"的表被忽略。
我做错了什么?
这里是jsfiddle: https://jsfiddle.net/1fhtk4sw/4/
添加到你的css中。您的输入字段默认为浏览器设置的宽度。它正在将表格内容推到1200px以上。
。clientSearchTableHeader输入{宽度:100%;}