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;いたるところにいて、不要なtop＆right宣言がありました。marginすべてを台無しにしたテーブルにいくつか。そのすべてが風に吹かれました。
&のwidthandpadding宣言を削除しました(そのうちのいくつかはandでした, 他はでした .. めちゃくちゃです。必要に応じて元に戻してください。レイアウトには影響しません。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である可能性があり、テーブルを散らばっています。同じテーブルだけでなく、そのテーブルの別の行にあるだけではない理由はわかりませんが、理由があると確信しています。

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

また....

2 番目のテーブルの左の境界線を削除するだけです。

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

または境界線を維持する、どちらか

score 0 · Accepted Answer

できます..

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

テーブル幅は最大 50% までです。うまくいかない場合は、float:left; を使用してください。

html - DIV 内の CSS テーブルのサイズ変更

3 に答える 3

Related

Reference