0

I want to make one width of column in table to be less, than content with. Here's my code:

html:

<table class="table">
    <thead>
        <tr>
            <th class="col1">col1</th>
            <th class="col2">col2</th>
            <th class="col3">col3</th>
            <th class="col4">col4</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="col1">aaaaaa</td>
            <td class="col2">aaaaaa</td>
            <td class="col3">aaaaaa</td>
            <td class="col4">aaaaaa</td>
        </tr>
    </tbody>
</table>

scss:

.table {
    margin: 0;
    padding: 0;
    border-collapse: collapse;
    table-layout: fixed;
}

td, th {
    border: 1px solid black;
    padding: 5px 8px;
}

td:first-child, th:first-child {
    width: 10px;
    overflow: hidden;
    white-space: nowrap;
}

As I understand setting table-layout: fixed should helped, but nothing is really changed. The first column's with still is not 10px.

How can I set width to a column then?

table

2
  • so you want same width for al td?
    – Manjuboyz
    Sep 4, 2020 at 10:55
  • @Manjuboyz, No. I want first column to be 10px, and other to be as content width Sep 4, 2020 at 10:57

2 Answers 2

2

You may give it a try with max-width instead.

disclaimer: unsure if all browsers will take it

.table {
    margin: 0;
    padding: 0;
    border-collapse: collapse;
    table-layout: fixed; 
}

td, th {
    border: 1px solid black;
    padding: 5px 8px;
}

td:first-child, th:first-child {
    max-width: 10px;
    overflow: hidden;
    white-space: nowrap;
}
<table class="table">
    <thead>
        <tr>
            <th class="col1">col1</th>
            <th class="col2">col2</th>
            <th class="col3">col3</th>
            <th class="col4">col4</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="col1">aaaaaa</td>
            <td class="col2">aaaaaa</td>
            <td class="col3">aaaaaa</td>
            <td class="col4">aaaaaa</td>
        </tr>
    </tbody>
</table>

0

Also when I added width: 100% to the table, code started to work

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.