Table with table-layout: fixed; and how to make one column wider

by

You could just give the first cell (therefore column) a width and have the rest default to auto

table {
  table-layout: fixed;
  border-collapse: collapse;
  width: 100%;
}
td {
  border: 1px solid #000;
  width: 150px;
}
td+td {
  width: auto;
}
<table>
  <tr>
    <td>150px</td>
    <td>equal</td>
    <td>equal</td>
  </tr>
</table>

or alternatively the “proper way” to get column widths might be to use the col element itself

table {
  table-layout: fixed;
  border-collapse: collapse;
  width: 100%;
}
td {
  border: 1px solid #000;
}
.wide {
  width: 150px;
}
<table>
  <col span="1" class="wide">
    <tr>
      <td>150px</td>
      <td>equal</td>
      <td>equal</td>
    </tr>
</table>

More Related Contents:

  1. Setting the width of inline elements
  2. A Space between Inline-Block List Items [duplicate]
  3. Is it wrong to change a block element to inline with CSS if it contains another block element?
  4. Margin-Top push outer div down
  5. display: inline-block extra margin [duplicate]
  6. Problems with CSS sticky footer
  7. Add centered text to the middle of a horizontal rule [duplicate]
  8. White space at bottom of anchor tag
  9. 100% Min Height CSS layout
  10. Making the main scrollbar always visible
  11. Remove outline from select box in FF
  12. How to make div occupy remaining height?
  13. Change checkbox check image to custom image
  14. display:inline with margin, padding, width, height
  15. Specifying Tab-Width?
  16. How to use an tag inside a in the middle of a text? [duplicate]
  17. Stretching tag to fill entire
  18. Padding the top and the bottom of inline element
  19. HTML list-style-type dash
  20. Table vertical header?
  21. What’s the point of valid CSS/HTML?
  22. Block Level Elements inside Inline elements [duplicate]
  23. Embed image in a element
  24. What makes the text on a element vertically centered?
  25. CSS3 border-radius clipping issues
  26. CSS transform origin issue on svg sub-element
  27. transition for background-image in firefox?
  28. CSS Layout 2-Column fixed-fluid [closed]
  29. Create a Reverse Clip-Path – CSS or SVG
  30. Cross browser method to fit a child div to its parent’s width

Leave a Comment