Search code examples
htmlcssgoogle-chrome-extensionhtml-tableword-wrap

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?

Solution

  • CSS:

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

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