HTML-таблица с вертикальными заголовками и ячейками одинаковой ширины

Question

Я пытаюсь создать таблицу с заголовком слева и содержимым в одной строке с одинаковой шириной.

Результат моих попыток приведен во фрагменте кода ниже.Содержимое ячеек не лает до разумного размера ячеек и отображается только в виде очень длинной горизонтальной линии (вместо разбиения на несколько строк).

 .table-demo {
        text-align: center;
        border-collapse: collapse;
        table-layout: fixed;
        overflow: visible;
        display: table;
    }

        .table-demo tr {
            display: inline-block;

        }

        .table-demo th, td {
            display: block;
            /*width:100%;*/
            border: 1px solid;

        }

    .wrapper {
        /*overflow-x: auto;*/
        white-space: nowrap;
        max-width:600px;
    }

<div class=" col-md-10 wrapper " >
    <table class="table table-responsive table-demo"  width="100%;">
        <tr>
            <th>
               Spec
            </th>
            <th>
               Spec  2
            </th>
            <th>
               Tect de
            </th>
            <th>
               Price
            </th>
            <th>
                Terms
            </th>
        </tr>

            <tr>
                <td>

                    with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
                </td>
                <td>
                    Offertext 2
                </td>
                <td > Lorem Ipsum is simply dummy text of the printing and t versions of Lorem Ipsum.


                </td>
                <td>

                                            <p>789.00</p>

                </td>
                <td>
                    &#x2B;40
                </td>
            </tr>
            <tr>
                <td>
                      with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
                </td>
                <td>
                    Offertext 2
                </td>
                <td > Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                    Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,



                </td>
                <td>

                        <p >999.00</p>

                </td>
                <td>
                    30
                </td>
            </tr>
            <tr>
                <td>
                    Lorem Ipsum issoftware like Aldus PageMaker including versions of Lorem Ipsum.
                </td>
                <td>
                    Offertext 2
                </td>
                <td > Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                    Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
                    when an unknown printer took a galley of type and scrambled it to make a type
                    specimen book. It has survived not only five centuries, but also the leap into 
                    electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release
                    of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like
                    Aldus PageMaker including versions of Lorem Ipsum.


                </td>
                <td>

                                        811.00
                </td>
                <td>
                    30
                </td>
            </tr>

    </table>
</div>

Я бы хотел:

a.Стол для встраивания в бутстрэп 10 цв.

б.Все ячейки должны иметь одинаковую ширину.

c.Длинный текст для торможения многолинейности.

Answer 1

Привет,

для достижения вертикальных заголовков в таблице. Я предлагаю просто поместить ячейку th в строку таблицы вместо попытки сделать это с помощью CSS.

---

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

table, th, td {
  border: 1px solid tomato;
  border-collapse: collapse;
}

/*Point b: all cells have the same width*/
th, td {
  width: 50%;
}

<table>
  <tr>
    <th>Short</th>
    <td>Mallard is a kind of duck.</td>
  </tr>
  <tr>
    <th>Empty row</th>
    <td></td>
  </tr>
  <tr>
    <th>What is Lorem Ipsum?</th>
    <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</td>
  </tr>
</table>

---

Приветствия