1 year ago

#31563

test-img

Chiwda

How to shrink width of all but one table cell (<td>)?

I have researched this and the solutions I have found, like this one use

table {
    table-layout: auto;
}

However, I need

table {
  table-layout:fixed;
  width:100%;
}

because it is the only thing that works for wrapping text in one cell (Contact Message) which has a long message. See this. The other cells in that table are short words, but the columns are much wider than the actual word. So, how can I autofit those cells which contain less text but give maximum width to the Contact Message cell (it cannot be the last column) that has the long message. Note that I am also using the following:

.Main {
    width: 95%;
    overflow-x: hidden;
    margin:0 auto;
}

where Main is the containing Div. See HTML below:

<div class="Main">      
<table id="ContactTable" class="table table-striped">
        <thead>
            <tr>
                <th>Contact Name</th>
                <th>Contact Email</th>
                <th>Contact Phone</th>
                <th>Contact Subject</th>
                <th>Contact Message</th>
                <th>Contact Date</th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody>

css

word-wrap

css-tables

tablecell

0 Answers

Your Answer

Accepted video resources