CODEWITHSUNDEEP
csshtml-table
Maddy
Maddy

Reputation: 2060

How to move specific td elements in a table

I have the the following following table structure, but I want to change it to thisthis table structure.

I have looked at posts on SO and other places but have not been able to find a solution. Is this possible using css? This SO posts is the closest I have found but it still does not work as needed.

Can someone please guide me on how to approach this?

Upvotes: 0

Views: 1219

Answers (2)

Johannes
Johannes

Reputation: 67776

You can use one table per row as a workaround, with CSS for the borders as shown below:

table {
  border-collapse: collapse;
  width: 100%;
}

td {
  padding: 4px;
  border: 1px solid #ccc;
  border-bottom: none;
}

table:last-of-type td {
  border-bottom: 1px solid #ccc;
}
<table>
  <tr>
    <td>Test Test Test Test Test Test</td>
    <td>Test Test</td>
    <td>Test Test Test Test</td>
  </tr>
</table>
<table>
  <tr>
    <td>Test Test</td>
    <td>Test Test Test Test</td>
    <td>Test Test Test Test Test Test Test</td>
  </tr>
</table>

Upvotes: 4

Red
Red

Reputation: 3267

Using flex you can do this with align-items: stretch;

#container {
  width: 200px;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}

#container div {
  height: 30px;
  border: solid 1px black;
  margin: 5px;
}
<div id="container">
  <div style="width: 80px;"></div>
  <div style="width: 35px;"></div>
  <div style="width: 35px;"></div>
  <div style="width: 50px;"></div>
  <div style="width: 50px;"></div>
  <div style="width: 50px;"></div>
</div>

Upvotes: 0

Related Questions