Блог

Главная - Вопросы по программированию - Как мне имитировать процентное соотношение ширины строки таблицы с помощью CSS?

Как мне имитировать процентное соотношение ширины строки таблицы с помощью CSS?

#html #css #html-table

#HTML #css #html-таблица

Вопрос:

Из этого может быть не очевидно, что я пытаюсь создать что-то вроде приведенной ниже таблицы:

http://jsfiddle.net/yVScW/1/

 |     40%       |          60%        |
______________________________________
|----header----|---------content------|
|----header----|---------content------|
______________________________________

Идея заключается в том, чтобы заголовок занимал 40% от ширины строки, а содержимое — 60% от ширины строки в каждой строке.

Это было мое лучшее приближение в CSS, но не работает:

 .top  {padding:5px;background:blue; width:200px;}
.layer {padding:5px;background:green;}
.header {padding:5px;background:yellow; width:40%;display:inline;}
.content {padding:5px;background:red; width:60%;display:inline;}

используя этот HTML:

 <div class="top">
    <p class="layer">
        <div class="header">header</div>
        <div class="content">content</div>
    </p>
    <p class="layer">
        <div class="header">header</div>
        <div class="content">content</div>
    </p>
</div>

Ответ №1:

Так что да. Таблицы — это зло. Но. здесь они отлично работают. Почему бы вам просто не сделать…

 <table class="top">
<tr class="layer">
<th>
header
</th>
<td class="content">
content
</td>
</tr>
</table>

И измените свои стили на:

 .top  {
   padding:5px;
   background:blue; 
   width:200px;
 }
.layer {
   padding:5px;
   background:green;
}
th {
   padding:5px;
   background:yellow;
   width:40%;
   display:inline;
}
.content {
   padding:5px;
   background:red; 
   width:60%;
   display:inline;
}

Комментарии:

1. 1. Если у вас есть таблица с информацией, значит, у вас есть таблица. Таблицы отлично подходят для отображения табличных данных. Почему это такая большая проблема для стольких людей?

2. однако есть одно предложение: вы могли бы вообще исключить классы, используя <th scope="row"> вместо <td> для элементов заголовка. Тогда каждый раздел имеет свой собственный тип тега и может быть настроен на основе этого. Преимущество этого также в том, что оно более семантически корректно.

3. @Matthew Да, очень верно. Я изменю это.

Ответ №2:

HTML:

 <div class="top">
    <div class="layer left">
        <div class="header">header</div>
        <div class="content">content</div>
    </div>
    <div class="layer right">
        <div class="header">header</div>
        <div class="content">content</div>
    </div>

     <div class="clear"></div>
</div>

CSS:

 div.clear
{
    clear: both;
}

div.layer
{
    float: left;
}

div.left
{
    width: 40%;
}

div.right
{
    width: 60%;
}

Ответ №3:

Вы можете изменить свой css на:

 .top  {
    position:relative;
    background:blue;
    width:200px;
}
.layer {padding:5px;
    background:green;
}
.header {
    position:absolute;
    left:0px;
    display:table-cell;
    background:yellow;
    width:40%;
}
.content {
    position:absolute;
    right:0px;
    display:table-cell;
    background:red;
    width:60%;
}

Обновленная скрипка:http://jsfiddle.net/yVScW/2 /

Ответ №4:

Как насчет чего-то подобного:

 <div class="top">
    <div class="layer">
        <div class="header">header</div>
        <div class="content">content</div>
        <div class="clear"></div>
    </div>
    <div class="layer">
        <div class="header">header</div>
        <div class="content">content</div>
        <div class="clear"></div>
    </div>
    <div class="clear"></div>
</div>
  
 .top {
    background: blue;
    width: 300px;
    padding: 0;
}
.layer {
    padding: 5px;
    background: green;
}
.header {
    padding: 1%;
    margin: 0;
    background: yellow;
    width: 38%;
    float: left;
}
.content {
    padding: 1%;
    margin: 0;
    background: red;
    width: 58%;
    float: right;
}
.clear {
    clear: both;
}

jsFiddle:http://jsfiddle.net/cdKJ3/1 /