Html 在DIV内调整CSS表大小_Html_Css

Html 在DIV内调整CSS表大小

html css

Html 在DIV内调整CSS表大小,html,css,Html,Css,我有一张桌子有点问题。我想要两张桌子并排放在沙发上，两张桌子的宽度都一样。我曾尝试手动设置宽度ect，但没有成功，任何帮助都将是巨大的现在看起来是这样 Html 它起作用了 <div width="100%"> <table width="48%"> //your stuff </table> <table width="48%"> //your stuff </table> </div> //你的东西 //你的东西

我有一张桌子有点问题。我想要两张桌子并排放在沙发上，两张桌子的宽度都一样。我曾尝试手动设置宽度ect，但没有成功，任何帮助都将是巨大的

现在看起来是这样

Html

它起作用了

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


//你的东西
//你的东西

工作台宽度最大可达50%。。如果它不适合你，那么使用float:left

它起作用了

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


//你的东西
//你的东西

工作台宽度最大可达50%。。

如果它不适合你，那么使用float:left

这是一把小提琴：

我花了一段时间才弄明白你的问题是什么

在css中有一个额外的结束括号

。导致样式表无法正确加载

您的包含div太小，无法容纳[fiddle页上]的2个表（它们至少需要与内容一样大），因此我删除了

宽度：50%。但是在一个普通的页面上，你应该有足够的空间，这样你就可以把它带回来

你有位置：相对到处都是，还有不必要的顶部
和右侧
声明。用一些
边距

去破坏一切的表格。所有这些都随风而逝

我已经删除了

th

和

td

的

width

和

padding

声明（其中一些声明是

2%

，一些声明是

20%

，另一些声明是

50px

，哥们..太乱了，需要时把它们拿回来。它们不应该影响布局

我添加了一个

来将表格与标签分开

我删除了所有默认的

边距

填充

，以获得所有可用空间的使用（使用

选择器）

当我在那里的时候，我也自由地修复了一些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>

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

这是一把小提琴：

我花了一段时间才弄明白你的问题是什么

css中有一个额外的结束括号

。导致样式表无法正确加载

您的包含div太小，无法容纳[在fiddle页面上]的2个表（它们至少需要与内容一样大），因此我删除了

宽度：50%；

。但是在常规页面上，您应该有足够的空间，以便可以将其带回来

你有

position:relative；

到处都是，还有不必要的

top

和

right

声明。还有一些

空白

到那些毁掉一切的表格。所有这些都随风而去了