Вопросы Теги

Вертикальный заголовок таблицы?

Исправьте меня, если я неправ, но я читаю вопрос снова и снова и все еще думаю, что Angus McCoteup спрашивал, как установить элемент, чтобы быть положением: фиксированный.

Angus McCoteup, проверьте http://www.cssplay.co.uk/layouts/fixed.html - если Вы хотите, чтобы Ваш DIV вел себя как меню там, взглянул на CSS там

21
задан Brian Tompsett - 汤莱恩 26 October 2016 в 18:33
поделиться

6 ответов

Как это?

Пример

Example

CSS 

thead {
  float: left;   
}

thead th {
  display: block;   
}

tbody {
  float: right;   
}

jsFiddle .

Обновление

Ну, 1, 2 также должны быть в виде столбца, очевидно.

jsFiddle .

Это также похоже на то, что IE недоволен этим. Возможно, вам придется обменять семантику на совместимость с различными браузерами.

28
ответ дан 29 November 2019 в 06:23
поделиться

Просто используйте <th> в качестве первого элемента в строке. Затем добавьте атрибут scope, который не оказывает визуального воздействия, но вы можете использовать его, например, в CSS. 

<table>
  <tbody>
    <tr>
      <th scope="row">A</th>
      <td>b</td>
    </tr>
    <tr>
      <th scope="row">C</th>
      <td>d</td>
    </tr>
  </tbody>
</table>

См. Также http://www.w3.org/TR/WCAG20-TECHS/H63

.
40
ответ дан 29 November 2019 в 06:23
поделиться

Это отлично сработало для меня: (вдохновлено первым ответом)

Пример здесь

html: 

 <table>
  <thead>
    <tr>
      <th>A</th>
      <th>B</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>a1</td>
      <td>b1</td>
    </tr>
    <tr>
      <td>a2</td>
      <td>b2</td>
    </tr>
    <tr>
      <td>a3</td>
      <td>b3</td>
    </tr>
  </tbody>
</table>

css: 

table, td, th {
  border: 1px solid red;
}

thead {
  float: left;   
}
thead th {
  display: block;   
  background: yellow;
}

tbody {
  float: left;   
}
tbody tr {
  display: block;
  float: left;
}
tbody td {
  display: block;
}
1
ответ дан 29 November 2019 в 06:23
поделиться

Вы можете увидеть результат здесь . Вы имеете в виду, как это? 

<table border="1">
    <thead>
        <tr>
            <th></th>
            <th colspan="2">Letters</th>
        </tr>
        <tr>
            <th></th>
            <th>a</th>
            <th>b</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td rowspan="3">Numbers</td>
            <td>1</td>
            <td>4</td>
        </tr>
        <tr>
            <td>2</td>
            <td>5</td>
        </tr>
        <tr>
            <td>3</td>
            <td>6</td>
        </tr>
    </tbody>
</table>

Вы обычно используете rowspan и colspan для ячеек, охватывающих несколько столбцов / строк.

1
ответ дан 29 November 2019 в 06:23
поделиться

Мне нужно было что-то немного другое, но ответы @alex и @marion заставили меня начать в правильном направлении. Проблема заключалась в том, что когда вам нужно было много элементов в таблице, «колонки» стали смешно складываться на маленьких экранах.

Спасибо Сержу за его ответ здесь , который привел меня к этому решению. Это решение позволяет осуществлять горизонтальную прокрутку и не смешно, независимо от размера экрана / окна. Я тестировал его в Chrome, Firefox, Opera, Edge и IE11. Вот скрипка с правильным выравниванием для новых «строк» ​​и «столбцов»: https://jsfiddle.net/berrym/6r3zvaef/21/

И на всякий случай он исчезает от JSFiddle: 

<style>
table{
  display:block;
  white-space:nowrap;
  width:100%;
}
td, th {
  border-bottom: 1px solid red;
  border-collapse: collapse;
}
thead {
  float: left;
  background: yellow;
  width: 10%;
}
thead tr {
  width:100%;
  float:left;
}
thead th {
  display: block;
}
tbody {
  float: left;
  width: 90%;
}
tbody tr {
  display: inline-block;
}
tbody td {
  float:left;
  width:100%;
}
</style>
<table>
  <thead>
    <tr>
      <th>A</th>
      <th>B</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>a1</td>
      <td>b1</td>
    </tr>
    <tr>
      <td>a2</td>
      <td>b2</td>
    </tr>
    <tr>
      <td>a3</td>
      <td>b3</td>
    </tr>
    <tr>
      <td>a1</td>
      <td>b1</td>
    </tr>
    <tr>
      <td>a2</td>
      <td>b2</td>
    </tr>
    <tr>
      <td>a3</td>
      <td>b3</td>
    </tr>
    <tr>
      <td>a1</td>
      <td>b1</td>
    </tr>
    <tr>
      <td>a2</td>
      <td>b2</td>
    </tr>
    <tr>
      <td>a3</td>
      <td>b3</td>
    </tr>
    <tr>
      <td>a1</td>
      <td>b1</td>
    </tr>
    <tr>
      <td>a2</td>
      <td>b2</td>
    </tr>
    <tr>
      <td>a3</td>
      <td>b3</td>
    </tr>
    <tr>
      <td>a1</td>
      <td>b1</td>
    </tr>
    <tr>
      <td>a2</td>
      <td>b2</td>
    </tr>
    <tr>
      <td>a3</td>
      <td>b3</td>
    </tr>
    <tr>
      <td>a1</td>
      <td>b1</td>
    </tr>
    <tr>
      <td>a2</td>
      <td>b2</td>
    </tr>
    <tr>
      <td>a3</td>
      <td>b3</td>
    </tr>
    <tr>
      <td>a1</td>
      <td>b1</td>
    </tr>
    <tr>
      <td>a2</td>
      <td>b2</td>
    </tr>
    <tr>
      <td>a3</td>
      <td>b3</td>
    </tr>
    <tr>
      <td>a1</td>
      <td>b1</td>
    </tr>
    <tr>
      <td>a2</td>
      <td>b2</td>
    </tr>
    <tr>
      <td>a3</td>
      <td>b3</td>
    </tr>
    <tr>
      <td>a1</td>
      <td>b1</td>
    </tr>
    <tr>
      <td>a2</td>
      <td>b2</td>
    </tr>
    <tr>
      <td>a3</td>
      <td>b3</td>
    </tr>
    <tr>
      <td>a1</td>
      <td>b1</td>
    </tr>
    <tr>
      <td>a2</td>
      <td>b2</td>
    </tr>
    <tr>
      <td>a3</td>
      <td>b3</td>
    </tr>
    <tr>
      <td>a1</td>
      <td>b1</td>
    </tr>
    <tr>
      <td>a2</td>
      <td>b2</td>
    </tr>
    <tr>
      <td>a3</td>
      <td>b3</td>
    </tr>
    <tr>
      <td>a1</td>
      <td>b1</td>
    </tr>
    <tr>
      <td>a2</td>
      <td>b2</td>
    </tr>
    <tr>
      <td>a3</td>
      <td>b3</td>
    </tr>
    <tr>
      <td>a1</td>
      <td>b1</td>
    </tr>
    <tr>
      <td>a2</td>
      <td>b2</td>
    </tr>
    <tr>
      <td>a3</td>
      <td>b3</td>
    </tr>
  </tbody>
</table>
1
ответ дан 29 November 2019 в 06:23
поделиться

Если вы используете загрузчик, вы можете легко добиться этого с помощью стиля table-reflow: http://v4-alpha.getbootstrap.com/content/tables/#reflow

0
ответ дан 29 November 2019 в 06:23
поделиться