CODEWITHSUNDEEP
javascriptjqueryhtmlcsshtml-table
imGaurav
imGaurav

Reputation: 1053

Unable to keep the table column width fix with CSS colgroup

p {
  width: 40px;
  margin: 0;
  padding: 0;
}
td {
  padding: 0;
  margin: 0;
}
<table style="width:100px;">
  <colgroup>
    <col style="width:20px;">
      <col style="width:40px;">
        <col style="width:40px;">
  </colgroup>
  <tr>
    <th>ID</th>
    <th>NAME</th>
    <th>Email</th>
  </tr>
  <tbody>
    <tr>
      <td>1</td>
      <td>john</td>
      <td>
        <p>[email protected] dsdsdsdsdsd dsdsdsdddddddddddddddddddddddsd dsdsssssssssssssdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsds
          sadddddddddddddddddddddddddd
        </p>
      </td>
    </tr>
  </tbody>
</table>

I have simple table with fix width. I also have fix width for columns in it to do that I have used CSS colgroup.

Problem 1:

Width of my columns if I check in developer's tool is different than that of what I have given in colgroup.

What I have tried

While fixing it I have found that the width changes with the text in it if I increase the text td increases and vice versa.

Problem 2:

When I enter the text in td unless I don't break it on new line by hitting enter the width of td goes on increasing with text.

What I have tried

To tackle this problem I have wrap my text in a p tag with fix width and then put it in td but still no luck. What I see is width is getting applied to P tag but text is overflowing.

What I expect :

I would like to know that why text is not breaking itself on new line after the fixed width of td. Why text overflows out of P even after fix width? Why td has to increase even after fix width?

I don't know what I am missing to apply here.

Upvotes: 0

Views: 909

Answers (2)

snaren
snaren

Reputation: 46

The width of the <p> tag and <td> are fixed they are not increasing.

Until there is no space in your text content it will not wrap to next line. You have to use ellipsis which will put ... in place of overflowing text content. Use below css for your <p> tag.

p {
    width: 40px;
    margin: 0;
    padding: 0;
    text-overflow: ellipsis;
    overflow: hidden;       
}

Upvotes: 0

Dinesh Patra
Dinesh Patra

Reputation: 1135

for the table use css property

table-layout: fixed;

Then provide fixed with to your td columns.

Upvotes: 1

Related Questions