html - DIV 内的 CSS 表格调整大小

Question

我有一张 table ，我遇到了麻烦。我想在 Div 中将两个表并排放置，两个表的宽度都相等。我曾尝试手动设置宽度等，但没有成功，任何帮助都很好。

目前看起来是这样的

HTML

<div class = "CoresAreaDiv"> 


<label class="CoresLabel">CoreShop</label>  

<table  class="CoreShopTable"  >

<tr>
<th>
L1
</th>

<td>@ViewData["L1"]</td>

</tr>
<tr>
<th>L2</th>
<td>@ViewData["L2"]</td>
</tr>
<tr>
<th>L3</th>
<td>@ViewData["L3"]</td>
</tr>
<tr>
<th>L4</th>
<td>@ViewData["L4"]</td>
</tr>
<tr>
<th>L5</th>
<td>@ViewData["L5"]</td>
</tr>
<tr>
<th>L6</th>
<td>@ViewData["L6"]</td>
</tr>
<tr>
<th>L7</th>
<td>@ViewData["L7"]</td>
</tr>
<tr>
<th>L8</th>
<td>@ViewData["L8"]</td>
</tr>
</table>

<table class="CoreShopTable2">

<tr>
<th>L9</th>
<td>@ViewData["L9"]</td>
</tr>

<tr>
<th>L10</th>
<td>@ViewData["L10"]</td>
</tr>

<tr>
<th>L11</th>
<td>@ViewData["L11"]</td>
</tr>

<tr>
<th>L12</th>
<td>@ViewData["L12"]</td>
</tr>

<tr>
<th>L13</th>
<td>@ViewData["L13"]</td>
</tr>

<tr>
<th>L14</th>
<td>@ViewData["L14"]</td>
</tr>

<tr>
<th>L15</th>
<td>@ViewData["L15"]</td>
</tr>

<tr>
<th>L18</th>
<td>@ViewData["L18"]</td>
</tr>




</table>

</div>

下面的CSS代码是

    .CoresAreaDiv 
{

 width:50%;

}


}
table.CoreShopTable
{
    text-align: left;
    margin: 45px;
    border-collapse: collapse;
    font-family: "Lucida Sans Unicode" , "Lucida Grande" , Sans-Serif;
    width: 20%;;
    position: relative;
    float: left;
}


table.CoreShopTable th
{
    width: 2%;
    font-weight: normal;
    padding: 8px;
    background: #b9c9fe url('table-images/gradhead.png') repeat-x;
    border-top: 2px solid #d3ddff;
    border-bottom: 1px solid #fff;
    color: #039;
    font-size: larger;
    font-weight: bolder;
    text-align: center;
}


table.CoreShopTable td
{
    padding: 8px;
    border-bottom: 1px solid #fff;
    color: #669;
    border-top: 1px solid #fff;
    background: #e8edff url('table-images/gradback.png') repeat-x;
    font-size: larger;
    text-align: center;
    width: 2%;
}

table.CoreShopTable td:hover
{
    background: #d0dafd url(C:\Users\pbrady\Desktop\Code\MvcApplication1\MvcApplication1\Images\gradhover.png);
    color: #339;
}


table.CoreShopTable2
{
    text-align: left;
    margin: 45px;
    border-collapse: collapse;
    font-family: "Lucida Sans Unicode" , "Lucida Grande" , Sans-Serif;
    width: 50px;
    float: right;
    right: -50px;
    top: -357px;
    position: relative;

}

table.CoreShopTable2 th
{
    width: 20%;
    font-weight: normal;
    padding: 8px;
    background: #b9c9fe url('table-images/gradhead.png') repeat-x;
    border-top: 2px solid #d3ddff;
    border-bottom: 1px solid #fff;
    color: #039;
    font-size: larger;
    font-weight: bolder;
    text-align: center;
}


table.CoreShopTable2 td
{
    padding: 8px;
    border-bottom: 1px solid #fff;
    color: #669;
    border-top: 1px solid #fff;
    background: #e8edff url('table-images/gradback.png') repeat-x;
    font-size: larger;
    text-align: center;
}

Answer 1

这是一个工作 fiddle :http://jsfiddle.net/avrahamcool/npvK5/

我花了一段时间才弄清楚你的问题是什么。

1. 你有一个额外的结束手镯 }在你的CSS中。导致样式表无法正确加载。

2. 你包含的 div 对于 2 个表来说太小 [在 fiddle 页面上](它们至少需要像它们的内容一样大)，所以我删除了 width: 50%; .但在常规页面上，您应该有足够的空间，以便可以将其取回。

3. 你有 position: relative;到处都是，不必要的top & right声明。与一些margin到毁了一切的 table 。所有这些都随风而去。

4. 我已经删除了 width和 padding th的声明& td (其中一些是 2% 和一些 20% ，其他的是 50px ，老兄..它是一团糟，需要时把它们带回来。它们不应该影响布局。

5. 我添加了一个 <br/>将表格与标签分开。

6. 我已经删除了所有默认 margin & padding获得所有可用空间的使用(使用 * 选择器)。

当我在那里的时候，我也冒昧地修复了你的一些 CSS，请注意我的 fiddle 是如何更清晰、更容易的。 我删除了一些声明，因为它们是默认的。记住 - 少即是多。

所以，总而言之:

HTML:

<div class="CoresAreaDiv">
    <label class="CoresLabel">CoreShop</label>
    <br/>
    <table class="CoreShopTable">
        <tr>
            <th>L1</th>
            <td>@ViewData["L1"]</td>
        </tr>
        <tr>
            <th>L2</th>
            <td>@ViewData["L2"]</td>
        </tr>
        <tr>
            <th>L3</th>
            <td>@ViewData["L3"]</td>
        </tr>
        <tr>
            <th>L4</th>
            <td>@ViewData["L4"]</td>
        </tr>
        <tr>
            <th>L5</th>
            <td>@ViewData["L5"]</td>
        </tr>
        <tr>
            <th>L6</th>
            <td>@ViewData["L6"]</td>
        </tr>
        <tr>
            <th>L7</th>
            <td>@ViewData["L7"]</td>
        </tr>
        <tr>
            <th>L8</th>
            <td>@ViewData["L8"]</td>
        </tr>
    </table>
    <table class="CoreShopTable">
        <tr>
            <th>L9</th>
            <td>@ViewData["L9"]</td>
        </tr>
        <tr>
            <th>L10</th>
            <td>@ViewData["L10"]</td>
        </tr>
        <tr>
            <th>L11</th>
            <td>@ViewData["L11"]</td>
        </tr>
        <tr>
            <th>L12</th>
            <td>@ViewData["L12"]</td>
        </tr>
        <tr>
            <th>L13</th>
            <td>@ViewData["L13"]</td>
        </tr>
        <tr>
            <th>L14</th>
            <td>@ViewData["L14"]</td>
        </tr>
        <tr>
            <th>L15</th>
            <td>@ViewData["L15"]</td>
        </tr>
        <tr>
            <th>L18</th>
            <td>@ViewData["L18"]</td>
        </tr>
    </table>
</div>

CSS:

*
{
    margin:0;
    padding: 0;
}
table.CoreShopTable
{
    border-collapse: collapse;
    font-family:"Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
    width: 50%;
    float: left;
}
table.CoreShopTable th {
    background: #b9c9fe url('table-images/gradhead.png') repeat-x;
    border-top: 2px solid #d3ddff;
    border-bottom: 1px solid #fff;
    color: #039;
    font-size: larger;
    font-weight: bolder;
}
table.CoreShopTable td
{
    border-bottom: 1px solid #fff;
    color: #669;
    border-top: 1px solid #fff;
    background: #e8edff url('table-images/gradback.png') repeat-x;
    font-size: larger;
    text-align: center;
}

table.CoreShopTable td:hover {
    background: #d0dafd url(C:\Users\pbrady\Desktop\Code\MvcApplication1\MvcApplication1\Images\gradhover.png);
    color: #339;
}