HTML table with vertical headers & cells with equal width

Question

I'm trying to create a table that the header is to the left and content is at the same line with same width.

Result of my trying is in the code snippet below. Cells content is not barking in to reasonable cell size and it is render just into a very long horizontal line (instead of breaking into few lines).

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

I would like it to:

a. The table to fit into bootstrap 10 col.

b. All cells to have the same width.

c. Long text to brake the multi line.

Answer 1

Hi,

to achive vertical headers in a table I suggest simply put a th cell into a table row instead of attempt do it with CSS.

---

I prepared a sample which meets your requirements from the question.

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>

---

Cheers