CODEWITHSUNDEEP
htmlcsshtml-table
pioupiou1211
pioupiou1211

Reputation: 373

Make the second column of a table span on the first one if too long

So basically here is my current result:

24 February   TITLE TITLE TITLE TITLE
              TITLE TITLE
              CONTENT CONTENT CONTENT

And I want this instead: 

24 February   TITLE TITLE TITLE TITLE
TITLE TITLE
              CONTENT CONTENT CONTENT

Here is the HTML:

<table>
  <tr>
    <td>11 February</td>
    <td>TITLE TITLE TITLE TITLE TITLE TITLE TITLE</td>
  </tr>
    <td></td>
    <td>CONTENT CONTENT CONTENT</td>
  </tr>
</table>

And the CSS:

table {
  table-layout: fixed;
  width: 50%;
  border: solid;
}


td:nth-of-type(1) {
  width: 5em;
  vertical-align:top;
}

I have no idea how to achieve what I want or even if it's a good idea to use HTML tables, so I'm open to any suggestion!

Upvotes: 0

Views: 56

Answers (1)

doğukan
doğukan

Reputation: 27381

this is?

.a {
  width:50%;
}

.aa {
  display:inline-block;
  width:120px;
}

.ab {
   display:inline;
   word-break:break-word;
}

.b {
  word-break:break-word;
  margin-left:125px;
}
<div class="a">
  <div class="aa">
  24 February 
  </div>
  <div class="ab">
    TITLE TITLE TITLE TITLE TITLE TITLE
  </div>
</div>
<div class="b">
  CONTENT CONTENT CONTENT
</div>

Upvotes: 0

Related Questions