Html table column size

Setting table column width

How do I set the width so the From and Date are 15% of the page width and the Subject is 70%. I also want the table to take up the whole page width.

13 Answers 13

@Isu_guy you only close

when using XHTML — in HTML, tag has no closing. see link for more info. In HTML5, is a void element, meaning it MUST NOT be closed

@Zulu according to w3schools.com/tags/att_col_width.asp «The width attribute is not supported in HTML5.»

@Caltor: the code is not using the width attribute ; it is using a CSS *style* width , which is what replaced the width attribute. (despite the multiple people up-voting that comment!!)

table < width: 100%; border: 1px solid #000; >th.from, th.date < width: 15% >th.subject < width: 70%; /* Not necessary, since only 70% width remains */ >

 
 
 
From
 
Subject
 
Date
 
 
 
 
[from]
 
[subject]
 
[date]
 
 
 

The best practice is to keep your HTML and CSS separate for less code duplication, and for separation of concerns ( HTML for structure and semantics, and CSS for presentation).

Note that, for this to work in older versions of Internet Explorer, you may have to give your table a specific width (e.g., 900px). That browser has some problems rendering an element with percentage dimensions if its wrapper doesn’t have exact dimensions.

Use the CSS below, the first declaration will ensure your table sticks to the widths you provide (you’ll need to add the classes in your HTML):

table < table-layout:fixed; >th.from, th.date < width: 15%; >th.subject

Actually you only need to specify width of the two columns. The third one will be calculated automatically, so table;.from,.date is enough. Unless the classes are used on other elements too, writing th.from is redundant and can be shortened to just .from .

Alternative way with just one class while keeping your styles in a CSS file, which even works in IE7:

 
 
From
 
Subject
 
Date
 
 
 .mytable td, .mytable th < width:15%; >.mytable td + td, .mytable th + th < width:70%; >.mytable td + td + td, .mytable th + th + th 

More recently, you can also use the nth-child() selector from CSS3 (IE9+), where you’d just put the nr. of the respective column into the parenthesis instead of stringing them together with the adjacent selector. Like this, for example:

 .mytable tr > *:nth-child(1) < width:15%; >.mytable tr > *:nth-child(2) < width:70%; >.mytable tr > *:nth-child(3) 

The proposed :nth-child solution is horrible in terms of performance. There is no valid reason to use it (especially with the universal selector) in this example where there are only three elements ( th or col ) to style. Additionally, you only need to set width to the th in the first row. The .mytable td in the first example is redundant.

This should be enough: Efficiently Rendering CSS. With your use of the universal selector the browser will first check ALL elements whether they are nth child of another element, then if their direct parent is tr and then whether they belong to .mytable . If you really want to use «nth» then something like this will probably be much better: .mytable th:nth-of-type(1) ; .mytable th:nth-of-type(2) ; . There is also no need to specify the third column width in this case.

Personally I would use classes or just .mytable th+th.mytable th+th+th . The «nth» selectors themselves may be very useful but in this particular case (a tiny table with only 3 columns) are not really needed. When using table-layout: fixed you can even do just this: tableth:first-child+th .

I’m aware of that. But those articles are from years back, and there are bigger problems today that CSS selectors, like huge amounts of images and JS code.

Источник

HTML Table Sizes

HTML tables can have different sizes for each column, row or the entire table.

Use the style attribute with the width or height properties to specify the size of a table, row or column.

HTML Table Width

Example

Set the width of the table to 100%:

Note: Using a percentage as the size unit for a width means how wide will this element be compared to its parent element, which in this case is the element.

HTML Table Column Width

Example

Set the width of the first column to 70%:

HTML Table Row Height

To set the height of a specific row, add the style attribute on a table row element:

Example

Set the height of the second row to 200 pixels:

HTML Exercises

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

How to make a table column be a minimum width

Here is the template data file: https://github.com/Hoektronics/BotQueue/blob/master/views/bot/dashboard_list.ejs I’m trying to make 8 of the 10 columns of a table to only take up exactly the minimum width that they need to, based on the text, respecting the padding and column headers. In the example image, I want all but the 4th and 9th columns to take up the minimum width. Technically, there are 9 column headers, and the last one has a colspan of 2. The last header is a span3. I’d like the percentage column to take up the least width that is needed, and let the progress bar or the pass/view/fail buttons take up the rest. Column 4 is set up to replace overflowed text with an ellipsis. Example image:

3 Answers 3

There is a trick that involves setting some cells to a very small width, and then applying a white-space: nowrap property:

 
 
id
 
tiny
 
Fills space
 
Fills space
 
123
 
small
 
Fills space, wider
 
Fills space
 
thin
 
 
 

As you can also see in the above fiddle, nowrap forces the table cell to prevent any line-breaks, and thus align its width to the smallest possible.

NOTE: If you have a thead , you want to apply the td ‘s stylings to th as well.

UPDATE #1: Ellipsis (. )

To automatically collapse a longer column into ellipses, the text-overflow: ellipsis is what you are likely looking for:

This also requires overflow set to hidden , as well as a width or max-width with a fixed value. Add the cell-collapse class to cells whose width you would like to limit.

UPDATE #2: Handling Bootstrap

Bootstrap’s table class sets width: 100%; which will mess up this approach. You can fix that with table

NOTE: The tables in this approach already have full width because table cells already have width: auto; .

Previous Javascript-base solution removed, since the pure CSS-based approach now works consistently across all modern browsers. The original code is still available at the linked JSfiddle, commented out.

Источник

Create HTML Table With Different Column Sizes

1. Set Size of HTML Table Columns
2. Set Table Columns Width Using In-Line CSS
3. Set Table Columns Width Using Internal CSS

This article explains modifying the column’s width in HTML and CSS to meet our specifications. Because HTML5 deprecated various tags and properties, we will cover some alternate strategies for attaining the required functionality.

This tutorial will cover how to customize HTML tables using in-line and internal CSS.

Set Size of HTML Table Columns

We frequently need to develop tables with several columns and rows for our web pages. Sometimes we need different widths for each column of the HTML table.

Let’s see how we can create a table having columns with different widths. Before HTML5, the table tag and its associated tags like had a width property that allowed the developers to set the required width of the column.

html>  head>  style>  table, th, td   border:1px solid black;  border-collapse: collapse;  >  style>  head>  body>  table style="width:100%">  tr>  th width="15%">IDth>  th width="70%">Nameth>  th width="15%">Ageth>  tr>  tr>  td>1td>  td>Johntd>  td>25td>  tr>  tr>  td>2td>  td>Jacksontd>  td>40td>  tr>  table>  body>  html> 

The above HTML code uses the width property inside the tag. The table width is set to 100% .

We want the Name column wider than others. So we assign the width 70% to the Name column and 15% to the other two columns each.

Adding up all the figures 70 + 15 + 17 = 100 we get a 100 again.

In HTML5, the width property is deprecated. HTML no longer supports deprecated attributes and tags.

This change in HTML5 encourages developers to use CSS for any styling needed. Let’s see how we can set the table and its column width using CSS.

Set Table Columns Width Using In-Line CSS

Since we cannot use the width property inside the , we can still style our table using the style inside our tags, known as in-line styling. You can give a different width percentage to each column.

Check the code below to understand it clearly.

html>  head>  style>  table, th, td   border:1px solid black;  border-collapse: collapse;  >  style>  head>  body>  table style="width:100%">  tr>  th style="width:10%">IDth>  th style="width:40%">First Nameth>  th style="width:40%">Last Nameth>  th style="width:10%">Ageth>  tr>  tr>  td>1td>  td>Johntd>  td>Doetd>  td>25td>  tr>  tr>  td>2td>  td>Jacksontd>  td>Willtd>  td>40td>  tr>  table>  body>  html> 

In the above code, we assign 10, 40, 40, and 10 widths in percentage to each column. Adding up these figures will make a 100.

Since we set our table width to 100% , we must divide each column in the same range.

Set Table Columns Width Using Internal CSS

We have set the column width in the above code using in-line CSS. But in-line CSS is not recommendable as we must do a lot of rewriting if we want the same functionality on multiple web page regions.

It is a professional practice to keep the HTML and CSS code separate. So let’s see how we can style our table columns using internal CSS.

Internal CSS is written inside the style tag inside the HTML head tag.

Method 1: Use a CSS Class

One of the easiest methods is to assign a class to each tag and then apply styling to them in the style tag. Here’s how.

html>  head>  style>  table  width: 100%  >  table, th, td   border: 1px solid black;  border-collapse: collapse;  >  .name   width: 70%  >  .id, .age   width: 15%  >  style>  head>  body>  table>  tr>  th class="id">IDth>  th class="name">Nameth>  th class="age">Ageth>  tr>  tr>  td>1td>  td>Johntd>  td>25td>  tr>  tr>  td>2td>  td>Jacksontd>  td>40td>  tr>  table>  body>  html> 

Pretty simple. Right? But this method is not efficient in the case of a large number of columns.

Let’s say we have a table with 10 or 20 columns and want different widths for each. Assigning classes to each tag and styling all of them will be a hectic task.

There should be some way of doing this without giving classes to the tags and calling them directly in the style tag. Let’s see this technique in the following method.

Method 2: Use CSS Pseudo-Class Selector

Let’s look at another method to achieve our expected output using a better and more efficient code.

html>  head>  style>  table  width: 100%  >  table, th, td   border: 1px solid black;  border-collapse: collapse;  >  th:nth-child(1)   width: 5%  >  th:nth-child(2)   width: 70%  >  th:nth-child(3)   width: 25%  >  style>  head>  body>  table>  tr>  th>IDth>  th>Nameth>  th>Ageth>  tr>  tr>  td>1td>  td>Johntd>  td>25td>  tr>  tr>  td>2td>  td>Jacksontd>  td>40td>  tr>  table>  body>  html> 

Let’s understand what we did in the code. A CSS selector matches every parent’s nth child element.

The CSS pseudo-class selector :nth-child(n) is used to compare elements based on where they are located in a pair of siblings. The n can be any number or a keyword like, odd or even.

We select the tag in the style tag and call the nth-child selector on it. The nth-chid(1) means it will select the ID column, nth-child(2) will select the Name column, and so on.

This way, you can customize the column’s width without assigning a class to each tag.

One more important point here is that if you specify the width of the ID and Age columns, there is no need to select the width percentage of the Name column as the remaining width will be assigned automatically to it, and it will give us the same result.

html>  head>  style>  table  width: 100%  >  table, th, td   border: 1px solid black;  border-collapse: collapse;  >  th:nth-child(1)   width: 5%  >  th:nth-child(3)   width: 25%  >  style>  head>  body>  table>  tr>  th>IDth>  th>Nameth>  th>Ageth>  tr>  tr>  td>1td>  td>Johntd>  td>25td>  tr>  tr>  td>2td>  td>Jacksontd>  td>40td>  tr>  table>  body>  html> 

Источник