cssfirefoxcaption

How to make the width of the cell element be the same as the longer caption?

What should I add to the code below, so that the red and blue rectangles are the same width?

the result obtained (under Firefox) enter image description here

the result I would like: enter image description here

I searched for the solution for a long time in this link https://drafts.csswg.org/css2/#table but I haven't found how to do it

edit : I don't want line-break in the caption

caption {
  width:fit-content; /* I keep this line!*/
  border: 1px solid blue
}

tr {
  border: 1px solid red;
}
table {
  border-collapse: collapse;
}
<table>
  <caption>
    the caption zone the caption zone the caption...
  </caption>
  <tr>
    <td>the td the td </td>
  </tr>
</table>

Solution

  • You have to remove the width:fit-content; from caption css. Then you will have the same behavior in both chrome and firefox.

    Edited*

    To make this wireframe in chrome you have to add this line to caption tag:

    white-space: nowrap;

    About firefox, the only way i can think of is with js

    document.getElementsByTagName('td')[0].style.width = document.getElementsByTagName('caption')[0].clientWidth + 'px'

    You can use id or classes and foreach instead of tags, of course.