Table cell is not respecting CSS width value [duplicate] - html

Question

This question already has answers here:
Table cell width is ignored depending on input width set on unrelated row
(1 answer)
Table cell element ignoring width in CSS
(4 answers)
Why is my HTML table not respecting my CSS column width?
(10 answers)
Closed 3 months ago.
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?

Answer 1

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.