T
TanStack•7mo ago
foreign-sapphire

Getting table cells to wrap horizontally

Hey guys, I'm trying to create a table with the following behavior: - Cells of different widths in a column should align - The last cell, with width: "100%" should fill the remaining space available - The cells should wrap to the next row when there's not enough space remaining in the viewport. To get the cells to wrap to next row, the only solutions I've found were to set the display property of <tr> or <td> to something else like display: inline-block or display: flex, however by doing this, we lose first two behaviors that comes by default with display: table-row and display: table-cell. If anyone has an idea on how to achieve all 3 behaviors it'll be greatly appreciated. Sample code: 
<table style={{ border: "2px solid black" }}>
  <tbody>
    <tr>
      <td style={{ background: "yellow" }}>JonJonJonJonJon</td>
      <td style={{ background: "lightgreen" }}>Britney</td>
      <td style={{ background: "lightblue", width: "100%" }}>
        KylaKylaKylaKylaKylaKyla
      </td>
    </tr>
    <tr>
      <td style={{ background: "yellow" }}>Jon</td>
      <td style={{ background: "lightgreen" }}>
        BritneyBritneyBritneyBritney
      </td>
      <td style={{ background: "lightblue", width: "100%" }}>KylaKyla</td>
    </tr>
    <tr>
      <td style={{ background: "yellow" }}>
        JonJonJonJonJonJonJonJonJonJon
      </td>
      <td
        style={{
          background: "lightgreen",
        }}
      >
        BritneyBritneyBritney
      </td>
      <td style={{ background: "lightblue", width: "100%" }}>
        KylaKylaKylaKylaKyla
      </td>
    </tr>
  </tbody>
</table>
<table style={{ border: "2px solid black" }}>
  <tbody>
    <tr>
      <td style={{ background: "yellow" }}>JonJonJonJonJon</td>
      <td style={{ background: "lightgreen" }}>Britney</td>
      <td style={{ background: "lightblue", width: "100%" }}>
        KylaKylaKylaKylaKylaKyla
      </td>
    </tr>
    <tr>
      <td style={{ background: "yellow" }}>Jon</td>
      <td style={{ background: "lightgreen" }}>
        BritneyBritneyBritneyBritney
      </td>
      <td style={{ background: "lightblue", width: "100%" }}>KylaKyla</td>
    </tr>
    <tr>
      <td style={{ background: "yellow" }}>
        JonJonJonJonJonJonJonJonJonJon
      </td>
      <td
        style={{
          background: "lightgreen",
        }}
      >
        BritneyBritneyBritney
      </td>
      <td style={{ background: "lightblue", width: "100%" }}>
        KylaKylaKylaKylaKyla
      </td>
    </tr>
  </tbody>
</table>
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?