Question 250764 in Html Question posted in
Some basic documentation can be found here.

HTML table fill horizontally but have a single column wrap

I have a web extension popup for Chrome where popup.html contains a table like the following

<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="popup.css">
</head>
<body>
  <table><tbody>
      <tr>
        <td>Title A</td>
        <td>Medium Value A</td>
        <td>Ending A</td>
      </tr>
      <tr>
        <td>Title B</td>
        <td>Value B</td>
        <td>Ending B</td>
      </tr>
      <tr>
        <td>Title C</td>
        <td>Super Very Extra Elongated Almost A Sentence Value C</td>
        <td>Ending C</td>
      </tr>
      <tr>
        <td>Title D</td>
        <td>This is a very long value that will take up a lot of space in the second column of the table. It contains three sentences to make it even longer. This is the third sentence.</td>
        <td>Ending D</td>
      </tr>
  </tbody></table>
</body>
</html>

I need to supply CSS so that

  • the table (and the popup) takes up as much space horizontally inside the popup as the content text needs, to the max width of the popup (800px)
  • if the contents of the table take up more space than is allowed horizontally in the popup (800px) then the second column’s contents should wrap
  • none of the other columns’ contents should wrap

I’ve gotten partial solutions, but no full solution:

  1. If the table has the CSS rule table { white-space: nowrap } then it will expand but have a scroll bar due to the large last row
  2. Adding a rule to the second column table td:nth-child(2) { white-space: normal } causes the second column to shrink horizontally to the width of the longest word in the contents – the table does not fill the whole popup
  3. Setting the width of the popup via CSS rule html, body { margin: 0; width: 800px } allows the second column to wrap appropriately. But if the last row is removed, the popup is too wide and there is space on the right of the table

Is there a way to do this with CSS?

Tags:

2

Answers


  1. 0

    If I’m understanding correctly, you can give the table a width of 100% and just give each td a percentage width (or px width if you want).

    Here I have the first and third columns the same height and the second is wider.

    For testing I added a stripe to the even rows.

    table {
  width: 100%;
}

table tr td:nth-child(1),
table tr td:nth-child(3) {
  width: 20%;
}

table tr td:nth-child(2) {
  width: 60%;
}

table tr:nth-child(even){
background:red
}
    <table>
  <tbody>
    <tr>
      <td>Title A</td>
      <td>Medium Value A</td>
      <td>Ending A</td>
    </tr>
    <tr>
      <td>Title B</td>
      <td>Value B</td>
      <td>Ending B</td>
    </tr>
    <tr>
      <td>Title C</td>
      <td>Super Very Extra Elongated Almost A Sentence Value C</td>
      <td>Ending C</td>
    </tr>
    <tr>
      <td>Title D</td>
      <td>This is a very long value that will take up a lot of space in the second column of the table. It contains three sentences to make it even longer. This is the third sentence.</td>
      <td>Ending D</td>
    </tr>
  </tbody>
</table>
    Login or Signup to reply.
  2. 0

    CSS:

    body{
    max-width: 800px;
    width: max-content;
}

    max-content will stretch the body as per content. max-width will cap it at 800px

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search