Таблица CSS Изменение размера внутри DIV

У меня есть таблица, с которой у меня возникают проблемы. Я хотел бы иметь обе таблицы бок о бок в Div, равные ширине. Я попытался вручную установить ширину ect, но без успеха любая помощь вообще с этим была бы замечательной.Таблица CSS Изменение размера внутри DIV

Похоже, что это в настоящее время enter image description here

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

источник

2013-09-10 Inkey

Пожалуйста показать HTML а также ... – Joum

вам нужно посмотреть на свою ширину - некоторые tds установлены на 2%, а ваша вторая таблица установлена на 50 пикселей - отсортируйте их, и она должна работать правильно – Pete

здесь является рабочим скрипку: http://jsfiddle.net/avrahamcool/npvK5/

мне потребовалось некоторое время, чтобы понять, из чего ваша проблема.

у вас был дополнительный запирающий браслет } в вашем css. заставляя таблицу стилей не загружаться правильно.
Ваш содержащий div был слишком мал для 2 таблиц [на странице скрипки] (они должны быть как минимум большими по содержанию), поэтому я сбросил width: 50%;. но на обычной странице у вас должно быть достаточно места, чтобы вы могли вернуть его.
вы имели position: relative; повсюду, и ненужные top & right декларации. с некоторыми margin к столам, которые все испортили. все это ушло на ветер.
Я уронил декларацию width и padding для th & td (некоторые из них были 2% и некоторые 20%, другие были 50px, чувак .. его беспорядок, вернуть их по мере необходимости. Они не Шоуде влияют на макет.
Я добавить <br/> отделить таблицы от метки.
я уже отбросили все по умолчанию margin & padding, чтобы использовать все доступные места (с помощью переключателя *).

В то время как я был там, я взял на себя смелость исправить некоторые из ваших CSS, обратите внимание, как моя скрипка становится яснее и проще. Я отбросил часть декларации, потому что они по умолчанию. remmember - меньше.

так, в conclution:

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

источник

2013-09-10 15:22:19 avrahamcool

Он работает ..

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

ширина таблицы может быть максимальной до 50%. Если это не работает для вас. Затем используйте float: left;

источник

2013-09-10 09:16:15 Sasidharan

Использовали оба с порогом нет радости – Inkey

, потому что у вас были другие проблемы в вашем CSS. как правило, его решение правильное. – avrahamcool

Это может быть ДИВ, это sparating таблицы, я не посмотрите, почему у вас не просто есть в другой строке в этой таблице, а не только в той же таблице, но я уверен, что у вас есть причина s,

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

или ....

можно просто удалить левую границу второй таблицы:

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

или сохранить границу, в зависимости от того

источник

2013-09-10 15:26:57 internetgho5t

Таблица CSS Изменение размера внутри DIV

ответ

Смежные вопросы