CSS для отображения заголовков строк таблицы выше ячеек данных

Предположим, у меня есть таблица, как это на HTML странице, с пурпурной каймой вокруг th клеток и зеленой рамкой вокруг td клеток:CSS для отображения заголовков строк таблицы выше ячеек данных

Некоторый код, который производит это (CSS для view-small класса не используется в вышеуказанном дисплее, но это о том, чтобы объяснить):

<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
<title>Table Transformation</title> 

<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,700,700italic' rel='stylesheet' type='text/css'> 
<link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300italic,700' rel='stylesheet' type='text/css'> 

<style> 
body { font-family: "Opens Sans", sans-serif; } 

td { border: 1px solid green; } 
th { border: 1px solid purple; } 

.view-small table { display: block; width: 100%; } 
.view-small tbody { display: block; } 
.view-small tr { display: block; width: 100%; margin: 2em auto; position; relative; } 
.view-small th { display: block; width: 100%; position: absolute; left: 50%; transform: translateX(-50%); } 
.view-small td { display: inline-block; height: 1em; width: 30%; transform: translateY(1.5em); } 

</style> 
<body class=""> 
    <h1>Table Example</h1> 

    <table> 
     <tr> 
      <th>Numbers</th> 
      <td>One</td> 
      <td>Two</td> 
      <td>Three</td> 
     </tr> 
     <tr> 
      <th>Countries</th> 
      <td>Canada</td> 
      <td>Mexico</td> 
      <td>Guatemala</td> 
     </tr> 
     <tr> 
      <th>Planets</th> 
      <td>Mars</td> 
      <td>Jupiter</td> 
      <td>Saturn</td> 
     </tr> 
    </table> 

    <p>End of test</p> 

</body>

Мы думали, что для небольших устройств, было бы аккуратно, если бы мы могли сохранить горизонтальное пространство, отображая каждый заголовок строки над соответствующими ячейками данных. Если установить class="view-small" в тело тега в коде выше, я получаю это в Chrome на Windows, и почти то же самое в Firefox и IE11:

Это свидетельствует о том, что я собираюсь для. То, что я действительно хотел бы достичь, включает в себя, когда ячейки данных занимают горизонтальное пространство, которое заняла бы полная строка. В приведенном выше коде у меня есть ширина, искусственно установленная до 30%, но это не идеально!

Я собираюсь поработать с этим еще, но я думал, что посмотрю, попробовал ли кто-нибудь еще что-нибудь подобное или где-то видел решение!

источник

2016-06-01 Green Grasso Holm

использование box-sizing:border-box для box модель.

, то вы можете использовать calc() для width путем применения ((100%/3) - 3px), которая делит 100% экрана по 3 коробки затем вычесть 3px из border каждый px для каждой коробки, потому что лет используют box-sizing

*, 
 
*::before, 
 
*::after { 
 
    box-sizing: border-box 
 
} 
 
body { 
 
    font-family: "Opens Sans", sans-serif; 
 
    margin: 0 
 
} 
 
td { 
 
    border: 1px solid green; 
 
} 
 
th { 
 
    border: 1px solid purple; 
 
} 
 
.view-small table { 
 
    display: block; 
 
    width: 100%; 
 
} 
 
.view-small tbody { 
 
    display: block; 
 
} 
 
.view-small tr { 
 
    display: block; 
 
    width: 100%; 
 
    margin: 2em auto; 
 
    position: relative; 
 
} 
 
.view-small th { 
 
    display: block; 
 
    width: 100%; 
 
    position: absolute; 
 
    left: 50%; 
 
    transform: translateX(-50%); 
 
} 
 
.view-small td { 
 
    display: inline-block; 
 
    width: calc((100%/3) - 3px); 
 
    transform: translateY(1.5em); 
 
}

<body class="view-small"> 
 
    <h1>Table Example</h1> 
 

 
    <table> 
 
    <tr> 
 
     <th>Numbers</th> 
 
     <td>One</td> 
 
     <td>Two</td> 
 
     <td>Three</td> 
 
    </tr> 
 
    <tr> 
 
     <th>Countries</th> 
 
     <td>Canada</td> 
 
     <td>Mexico</td> 
 
     <td>Guatemala</td> 
 
    </tr> 
 
    <tr> 
 
     <th>Planets</th> 
 
     <td>Mars</td> 
 
     <td>Jupiter</td> 
 
     <td>Saturn</td> 
 
    </tr> 
 
    </table> 
 

 
    <p>End of test</p> 
 
</body>

источник

2016-06-01 23:03:33 dippas

Попытка изменить значения ширины и полей. Общее значение ширины (включая оба горизонтальных поля) должно составлять около 33%. Эти «3» после точки делают его более точным.

div{ 
 
    width: 30.3333333333%; 
 
    margin: 0 1.5%; 
 
    display: inline-block; 
 
    border: 1px solid black; 
 
    height: 20px; 
 
    box-sizing: border-box; 
 
    float: left; 
 
}

<div></div> 
 
<div></div> 
 
<div></div>

источник

2016-06-01 23:06:08 bakowroc

Привет. У меня нет div, чтобы применить это. Семантически это таблица (конечно, та, которую я создал для демонстрационных целей, а не та, которую я собираюсь создать для реального), и HTML будет иметь разметку таблицы. Кроме того, я хочу, чтобы у него был обычный дисплей таблицы, когда область просмотра выше заданной ширины (для которой в настоящее время у меня есть вид - маленький класс, но я заменю это на медиа-запрос). –

Мне пришло в голову, что расстояние между ячейками связано с тем, что у меня есть разрывы строк между ними в HTML, который превращается в пробелы в браузере. Я понял, что мне придется иметь элементы td на одной линии, чтобы заставить их быть смежными. –

Да, я знаю. Но вместо этого вы можете использовать теги таблицы (td, th), и он должен работать – bakowroc

CSS для отображения заголовков строк таблицы выше ячеек данных

ответ

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