HTML table 垂直 headers 单元格等宽

Question

我正在尝试创建 table，其中 header 位于左侧，内容位于同一行且宽度相同。

我尝试的结果在下面的代码片段中。单元格内容没有达到合理的单元格大小，而是呈现为一条很长的水平线（而不是分成几行）。

 .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>

我希望它：

一个。 table 适合 bootstrap 10 col.

b。所有单元格具有相同的宽度。

c。长文本以阻止多行。

Answer 1

嗨，

为了在 table 中实现垂直 headers 我建议简单地将 th 单元格放入 table 行而不是尝试使用 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>

HTML table 垂直 headers 单元格等宽

HTML table with vertical headers & cells with equal width

html-table

css-tables

嗨，

干杯