Как исправить ширину ячейки таблицы HTML?

Question

Я пытаюсь установить ширину ячейки таблицы HTML. Предположим, что в строке 5 ячеек все должны иметь одинаковую ширину, если новые ячейки будут добавлены, ширина должна быть такой же, но должна появиться горизонтальная полоса прокрутки. Here - пример W3school, который я пытаюсь. Пожалуйста, помогите мне решить эту проблему. В этом примере видно, что после добавления 12-15 ячеек размер ячеек уменьшается, после добавления еще нескольких ячеек появится полоса прокрутки.

Вот мой CSS, что я пробовал:

table { 
font-family: arial, sans-serif; 
border-collapse: collapse; 
width: 100%; 
table-layout: fixed; 
word-break: break-all; 
} 

td, th { 
    border: 1px solid #dddddd; 
    text-align: center; 
    padding: 8px; 
    width: 65%; 
    margin-bottom: 50px; 
} 
tr:nth-child(even) { 
    background-color: #dddddd; 
} 

Answer 1

вот как я решил вашу проблему, вот ее рабочая демонстрация. вы можете запустить и проверить, что он работает.

если вы даете CSS как

table{ 
width:100%; 
} 

тогда это становится слишком грязной, потому что она делит весь размер таблицы на 100%, так что прокрутка <th> появляются.

function myFunction() { 
 
    var row = document.getElementById("myRow"); 
 
    var x = row.insertCell(0); 
 
    x.innerHTML = "New cell"; 
 
}

table, td { 
 
    border: 1px solid black; 
 
    min-width: 90px; 
 
    overflow:auto; 
 
}

<p>Click the button to insert new cell(s) at the beginning of the table row.</p> 
 

 
<table> 
 
    <tr id="myRow"> 
 
    <td>First cell</td> 
 
    <td>Second cell</td> 
 
    <td>Third cell</td> 
 
    <td>fourth cell</td> 
 
    <td>First cell</td> 
 
    <td>Second cell</td> 
 
    <td>Third cell</td> 
 
    <td>fourth cell</td> 
 
    <td>Second cell</td> 
 
    <td>Third cell</td> 
 
    <td>fourth cell</td> 
 
    </tr> 
 
    </table> 
 
<button onclick="myFunction()">Try it</button>

Answer 2

CSS:

table, td { 
    border: 1px solid black; 
    min-width: 80px; 
    overflow: auto; 
} 

или

table, td { 
    border: 1px solid black; 
} 
#myRow > td { 
    min-width: 80px; 
    overflow: auto; 
} 

в вашем случае:

table { 
/* width must auto or none */ 
width:auto; 
font-family: arial, sans-serif; 
border-collapse: collapse; 
table-layout: fixed; 
word-break: break-all; 
} 

#myRow > td { 
    border: 1px solid black; 
    min-width: 80px; 
    overflow: auto; 
}