CODEWITHSUNDEEP
htmlcsshtml-table
Kirill
Kirill

Reputation: 1472

How can I set a fixed width for certain column in a table?

I have table with columns:

 <table style="table-layout: fixed; width: 100%; height: 100%;">
  <tr>
    <td>Column 1</td>
    <td class="сertainColumn">Column 2</td>
    <td>Column 3</td>
  </tr>
</table>

Also, I can change page width and table width dynamically and I can change column width dynamically.

When I increase the width, the columns width increases proportionally.

How can I freeze width for certain column?

Upvotes: 1

Views: 1976

Answers (1)

Soturi
Soturi

Reputation: 1496

It's hard to say, it looks like you're only showing partial of your HTML. I'm assuming you already have the certainColumn class defined in your CSS with something similar to the following:

.certainColumn {
    width: 100px;
}

Since you have table-layout: fixed applied, the first row determines the column widths. It could be possible you have other rows preceding the one shown which are determining the column width.

Typically, the header row has any fixed widths applied, and then the widths get applied for every row afterwards.

<table ...>
    <tr>
        <th>...</th>
        <th class="thFixedWidth">...</th>
        <th>...</th>
    </tr>
    <tr>
        <td>...</td>
        <td>inherits fixed width from header column</td>
        <td>...</td>
    </tr>
</table>

<style>.thFixedWidth { width: 100px; }</style>

Upvotes: 3

Related Questions