Set the width of the first column in a table

HTML & CSS
1

Hi everyone,

Can someone tell me how I would set the width of the first column of a table using css. The code is as follows:


<table class="data-size-table" style="font-size: 12px;" cellspacing="0" cellpadding="0">
<thead>
<tr><th>&nbsp;</th><th colspan="12">&nbsp;Sizes</th></tr>
</thead>
<tbody>
<tr class="cl first odd">
<td width="160"> Heading</td>
<td class="size-blue">28</td>
<td>30</td>
<td class="size-blue">32</td>
<td>34</td>
<td class="size-blue">36</td>
<td>38</td>
<td class="size-blue">40</td>
<td>42</td>
<td class="size-blue">44</td>
<td>46</td>
<td class="size-blue">48</td>
<td>50</td>
</tr>
<tr class="even">
<td> Heading </td>
<td>71</td>
<td>76</td>
<td>81</td>
<td>86</td>
<td>91</td>
<td>96</td>
<td>101</td>
<td>106</td>
<td>111</td>
<td>116</td>
<td>121</td>
<td>126</td>
</tr>
<tr class="odd">
<td> Heading </td>
<td class="size-blue">93</td>
<td>98</td>
<td class="size-blue">103</td>
<td>108</td>
<td class="size-blue">113</td>
<td>118</td>
<td class="size-blue">123</td>
<td>128</td>
<td class="size-blue">133</td>
<td>138</td>
<td class="size-blue">143</td>
<td>148</td>
</tr>
<tr class="even">
<td> Heading </td>
<td>99.6</td>
<td>101.5</td>
<td>102.5</td>
<td>103.95</td>
<td>105.4</td>
<td>106.85</td>
<td>108.3</td>
<td>109.25</td>
<td>110.2</td>
<td>111.15</td>
<td>112.1</td>
<td>113.05</td>
</tr>
<tr class="odd">
<td>Heading</td>
<td class="size-blue">60.5</td>
<td>63</td>
<td class="size-blue">65.5</td>
<td>68</td>
<td class="size-blue">70.5</td>
<td>73</td>
<td class="size-blue">75.5</td>
<td>78</td>
<td class="size-blue">80.5</td>
<td>83</td>
<td class="size-blue">85.5</td>
<td>88</td>
</tr>
</tbody>
</table>

Thanks very much in advance.

2

Add a class to a <td> tag. Add the associated styles at the top of the page or in an external style sheet. Width in a table cell is treated as a minimum width. Class names and ID names must begin with alpha characters; they cannot begin with digits.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
<!--
http://www.sitepoint.com/forums/showthread.php?1205497-Set-the-width-of-the-first-column-in-a-table
2014.04.17 00:35
gwh
-->
    <title>template</title>
    [color=blue]<style type="text/css">

.col1 {width:160px;}

    </style>[/color]
</head>
<body>

<table class="data-size-table" style="font-size:12px;" cellspacing="0" cellpadding="0">
    <thead>
        <tr>
            <th>&nbsp;</th>
            <th colspan="12">&nbsp;Sizes</th>
        </tr>
    </thead>
    <tbody>
        <tr class="cl first odd">
            <td [color=blue]class="col1"[/color]> Heading</td>
            <td class="size-blue">28</td>
            <td>30</td>
            <td class="size-blue">32</td>
            <td>34</td>
            <td class="size-blue">36</td>
            <td>38</td>
            <td class="size-blue">40</td>
            <td>42</td>
            <td class="size-blue">44</td>
            <td>46</td>
            <td class="size-blue">48</td>
            <td>50</td>
        </tr>
        <tr class="even">
            <td> Heading </td>
            <td>71</td>
            <td>76</td>
            <td>81</td>
            <td>86</td>
            <td>91</td>
            <td>96</td>
            <td>101</td>
            <td>106</td>
            <td>111</td>
            <td>116</td>
            <td>121</td>
            <td>126</td>
        </tr>
        <tr class="odd">
            <td> Heading </td>
            <td class="size-blue">93</td>
            <td>98</td>
            <td class="size-blue">103</td>
            <td>108</td>
            <td class="size-blue">113</td>
            <td>118</td>
            <td class="size-blue">123</td>
            <td>128</td>
            <td class="size-blue">133</td>
            <td>138</td>
            <td class="size-blue">143</td>
            <td>148</td>
        </tr>
        <tr class="even">
            <td> Heading </td>
            <td>99.6</td>
            <td>101.5</td>
            <td>102.5</td>
            <td>103.95</td>
            <td>105.4</td>
            <td>106.85</td>
            <td>108.3</td>
            <td>109.25</td>
            <td>110.2</td>
            <td>111.15</td>
            <td>112.1</td>
            <td>113.05</td>
        </tr>
        <tr class="odd">
            <td>Heading</td>
            <td class="size-blue">60.5</td>
            <td>63</td>
            <td class="size-blue">65.5</td>
            <td>68</td>
            <td class="size-blue">70.5</td>
            <td>73</td>
            <td class="size-blue">75.5</td>
            <td>78</td>
            <td class="size-blue">80.5</td>
            <td>83</td>
            <td class="size-blue">85.5</td>
            <td>88</td>
        </tr>
    </tbody>
</table>

</body>
</html>

You could move the font-size out of the table tag and put it with the other CSS by associating it with its class.

3

Ok great - thanks very much. I’ll give that a try.

4

Because I’m working in a Magento backend of our website, I don’t have access to the external css file so I’m going to need to use inline css. Could you let me know what the code would look like for inline css?

5

Instead of this:


<td class="col1"> Heading</td>

You would say this:


<td style="width:160px"> Heading</td>

I’m sure you could add a custom css file if you wanted as most CMS’s allow this.

6

Ok great - thanks so much. I’ll give that a try and investigate adding in a custom css file.