0

I was just going through this Github doc when I noticed the table was hard to read and started poking around the CSS to make it more eye appealing.

However, I realised that the td elements in the table were not respecting any width properties that I set. To reproduce the issue, I created this codepen. The styles in the codepen are from the Github docs.

The codepen has 2 tables: one whose contents contain a pre and a code tag and another which contains plain text. I have added an additional style in my codepen for all td elements: width: 50%. The first table does not respect this style while the second one does. Can anyone tell me why? Also, is there any explanation to why all the cells in the first table are affected and do not respect the width when only one cell has the pre and code tags?

Edit: Here's a code sample:

:root { --color-border-muted: #21262d; --color-canvas-default: #0d1117; --color-fg-default: #c9d1d9; --color-canvas-subtle: #161b22; --color-border-default: #30363d; } body { /* Styles from Githun docs */ color-scheme: dark; } * { box-sizing: border-box; } table { /* Styles from Githun docs */ display: table; border-collapse: collapse; position: relative; font-size: 90%; width: 100%; line-height: 1.5; table-layout: auto; word-wrap: break-word; color: var(--color-fg-default); } table tr { /* Styles from Githun docs */ background-color: var(--color-canvas-default); border-top: 1px solid var(--color-border-muted); } td { /* STYLE THAT MARKS THAT CELL WIDTH SHOULD ONLY BE 50% */ width: 50%; border: 1px solid var(--color-border-muted); padding: 0.5rem; } pre { /* Styles from Githun docs */ padding: 16px; overflow: auto; line-height: 1.45; background-color: var(--color-canvas-subtle); border-radius: 6px; margin-top: .5rem; border: 1px solid var(--color-border-default); word-wrap: normal; }
<table> <tbody> <tr> <td>Hello Margarita tula pera kola papaya. sdkjcnskdcn kjsdnckcnskdjnc k ckjdc ksdc kdjc kd ckd cksdj cjkd c sdk cskdjc kjd ckdj ckdjsc ksdjc kdjc dksc kdj c</td> <td>World</td> </tr> <tr> <td>Hello</td> <td>World</td> </tr> <tr> <td>Hello</td> <td>World</td> </tr> <tr> <td>Hello</td> <td>World</td> </tr> </tbody> </table> <br /> <table> <tbody> <tr> <td>Hello Margarita tula pera kola papaya. sdkjcnskdcn kjsdnckcnskdjnc k ckjdc ksdc kdjc kd ckd cksdj cjkd c sdk cskdjc kjd ckdj ckdjsc ksdjc kdjc dksc kdj c</td> <td>World</td> </tr> <tr> <td><pre><code class="hljs language-yaml"><span class="hljs-attr">run-name:</span> <span class="hljs-string">${{</span> <span class="hljs-string">github.actor</span> <span class="hljs-string">}}</span> <span class="hljs-string">is</span> <span class="hljs-string">learning</span> <span class="hljs-string">GitHub</span> <span class="hljs-string">Actions</span> <span class="hljs-string">Actions</span> <span class="hljs-string">Actions</span> <span class="hljs-string">Actions</span> <span class="hljs-string">Actions</span> <span class="hljs-string">Actions</span></code></pre></td> <td>World</td> </tr> <tr> <td>Hello</td> <td>World</td> </tr> <tr> <td>Hello</td> <td>World</td> </tr> </tbody> </table>

TLDR: In the codepen the table with pre and code tags in cells does not respect the width: 50% style set on cell elements (td). Why?

Improve this question
3
  • "Why?" - because: table-layout: auto // developer.mozilla.org/en-US/docs/Web/CSS/table-layout Commented Nov 11, 2022 at 14:25
  • @CBroe I did think of this earlier and removed the style. However, the result did not change. But what I failed to consider earlier was that the default browser value for the table-layout property is still auto. So, I have to explicitly mark it as fixed or it is always going to stay auto. Commented Nov 11, 2022 at 14:29
  • The pre-tag does not wrap text by default. Setting white-space: pre-wrap on the pre-tag makes the text wrap and "fixes" the table layout. Commented Nov 11, 2022 at 14:34

1 Answer 1

Reset to default
0

Credits: @CBroe

In the above CSS, there is one specific style that was responsible for the width not being respected:

table { . . . table-layout: auto; . . }

As mentioned in the Mozilla docs, a value of auto to table-layout results as follows:

By default, most browsers use an automatic table layout algorithm. The widths of the table and its cells are adjusted to fit the content.

This means that in auto, the content decides the layout. As mentioned in w3schools:

Browsers use an automatic table layout algorithm. The column width is set by the widest unbreakable content in the cells. The content will dictate the layout

So, you can replace it with table-layout:fixed to set your own width.

Note: Simply removing the style table-layout: auto will not do since the browser uses it as the default style. A value of fixed needs to be explicitly passed.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.