How to correctly set the column widths on my HTML table?


Tags: html,css

Problem :

This may sound like a basic question. I know how to set column widths by using the width tag. And by using CSS.

Take this HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta content="en-gb" http-equiv="Content-Language">
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Untitled 1</title>
<style type="text/css">
.tableStyle {
    border-collapse: collapse;
    border: 1px solid #000000;
}
</style>
</head>

<body>

<table class="tableStyle" style="width: 100%">
    <tr>
        <td>This is long text</td>
        <td>Date Column</td>
        <td>Date Column</td>
    </tr>
    <tr>
        <td>This is long text</td>
        <td>Date Column</td>
        <td>Date Column</td>
    </tr>
    <tr>
        <td>This is long text</td>
        <td>Date Column</td>
        <td>Date Column</td>
    </tr>
    <tr>
        <td>This is long text</td>
        <td>Date Column</td>
        <td>Date Column</td>
    </tr>
</table>

</body>

</html>

If possible, what I would like to do is set columns 2 and 3 to the size needed to show the content for those columns. And for column 1 to expand to fit.

Now, I know I can set the last 2 columns to, let us say, 10% each. And if I set the table width to 100% then column 1 will expand to fit.

But, since this HTML template will be used for over 30 languages, the column headings have more characters in some languages. In addition, if the font size is changed it would also throw it out.

So is there any way to get the last 2 columns to auto-size to content and first column expand to fit?

Thank you.

Andrew



Solution :

Use the <col> tag, which represents each column in the table, and style that. Here are two different ways to do what you want:

  1. Set the width of the first column to 100%

table {
  width: 100%;
}
<table border="1">
  <col style="width: 100%">
  <col>
  <col>
  <tr>
    <td>This is long text</td>
    <td>Date Column</td>
    <td>Date Column</td>
  </tr>
  <tr>
    <td>This is long text</td>
    <td>Date Column</td>
    <td>Date Column</td>
  </tr>
  <tr>
    <td>This is long text</td>
    <td>Date Column</td>
    <td>Date Column</td>
  </tr>
  <tr>
    <td>This is long text</td>
    <td>Date Column</td>
    <td>Date Column</td>
  </tr>
</table>

  1. Set the widths of the two other columns

table {
  width: 100%;
}
<table border="1">
  <col>
  <col style="width: 11%">
  <col style="width: 11%">
  <tr>
    <td>This is long text</td>
    <td>Date Column</td>
    <td>Date Column</td>
  </tr>
  <tr>
    <td>This is long text</td>
    <td>Date Column</td>
    <td>Date Column</td>
  </tr>
  <tr>
    <td>This is long text</td>
    <td>Date Column</td>
    <td>Date Column</td>
  </tr>
  <tr>
    <td>This is long text</td>
    <td>Date Column</td>
    <td>Date Column</td>
  </tr>
</table>


    CSS Howto..

    css how to force to ul,ol to show numbers or disc, after reset the list style.?

    Div is laying ontop of absolute-positioned element. How to put element above the div?

    How to link external CSS stylesheets on a Chromebook

    How to update a web app without suffering cached CSS issues?

    How to make a wavy border line to separate background images in html5/css?

    How to rotate an image back and forth with JavaScript

    How can apply multiple background color to one div

    How to use below css as inline for table row (tr)?

    Fixing GoogleMonkeyR column width issue. How to change a script's CSS?

    How to Set custom text Color in QTextEdit?

    How to adjust the size of background image with browsers window using media queries

    How can I change the colour of individual squares on this grid…?

    How to make a div tag without margins in css? [duplicate]

    CSS help - how to keep my div in place with a responsive design

    How do you use HTML5 tags while supporting Progressive Enhancement for no-script clients that don't natively recognize unknown elements?

    How to move stacked columns up (using bootstrap but any css will do)

    How to line up items of varied length in a resizable space in CSS?

    How to silently hide “Image not found” icon when src source image is not found

    How do I import 2 different files icons?

    Background hover showing in CSS

    How to organize CSS Sheets [closed]

    how to set css position absolute in hover state

    How to make H1 tag responsive in Avada WordPress theme using CSS

    How to select css id's with numbers in them?

    How to change the css color code permanent using php

    Block grid shows horizontal scroll bar in Foundation

    How to mask semi circles inside a rectangle and mask through css?

    How find all elements with a specific css property in a div and add a class to div

    How can i get spaces between images with the same class?

    How to make comment shape using css