html - 在 DIV 中调整 CSS 表的大小

Question

我有一张我遇到问题的桌子。我希望两个表在 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;
}

score 1 · Accepted Answer

这是一个工作小提琴：http: //jsfiddle.net/avrahamcool/npvK5/

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

你的CSS中有一个额外的闭合手镯}。导致样式表无法正确加载。
您包含的 div 对于 [在小提琴页面上] 的 2 个表来说太小了（它们至少需要像它们的内容一样大），所以我放弃了width: 50%;. 但是在普通页面上，您应该有足够的空间，以便您可以将其带回来。
你到处都是，以及position: relative;不必要的声明。有一些桌子毁了一切。这一切都随风而逝。toprightmargin
我已经放弃了&的widthandpadding声明（其中一些是和一些，另一些是，伙计.. 它一团糟，当你需要它们时把它们带回来。它们不应该影响布局。thtd2%20%50px
我添加了一个<br/>将表格与标签分开。
我已经放弃了所有默认margin&padding以获得所有可用空间的使用（使用*选择器）。

当我在那里的时候，我也冒昧地修复了你的一些 CSS，注意我的小提琴是如何更清晰、更容易的。我已经放弃了一些声明，因为它们是默认的。记住——少即是多。

所以，总而言之：

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;
}

score 0 · Accepted Answer

有用..

<div width="100%">
<table width="48%">
//your stuff
</table>
<table width="48%">
//your stuff
</table>
</div>

表格宽度最大可达 50%。如果它不适合你。然后使用 float:left;

score 0 · Accepted Answer

可能是 div，它正在分隔表格，我不明白为什么你不只是在该表格的另一行中，而不仅仅是同一张桌子，但我相信你有你的理由，

.CoresAreaDiv {
margin: 0;
padding: 0;
}

或者....

您可以删除第二个表格的左边框：

.CoreShopTable2 tr {
border-left: none;
margin-left: 0; /* to make sure there is still no awkward space */
}

或保留边界，以哪个为准

html - 在 DIV 中调整 CSS 表的大小

3 回答 3

Related

Reference