CSS Table Border

CSS set html table height and column widths

The following tutorial shows you how to use CSS to do «CSS set html table height and column widths».

CSS Style

The CSS style to do «CSS set html table height and column widths» is

#div1 !-- w w w . d e m o 2 s . c o m --> width:400px; padding:.5px; border:1px solid red; > colgroup < width:100%; > #col-1 < width:0*; > #col-2 < width:0*; > table < width:100%; text-align:left; margin:0; table-layout:auto; border:0px; border-radius:4px; border-collapse:collapse; > thead < background-color:#B2DFFF; border-top-left-radius:4px; border-top-right-radius:4px; > th < cursor:pointer; font-weight:normal; color:black; font-weight:bolder; border-bottom:0; border-right:thin dotted gray; > th:last-of-type < border-right:none; > tbody < overflow-y:scroll; background-color:#F0F0F0; border-bottom-left-radius:4px; border-bottom-right-radius:4px; > tbody td < display:table-cell; > thead tr < text-align:left; color:white; > td < border-bottom:0; border-top:0; border-bottom:1px solid #e8e8e8; border-right:thin dotted lightgray; line-height:1em !important; > td:last-child < border-right:none; > th < padding:4px 5px; > tbody tr:hover th, tbody tr:hover td < background-color:#FFE9CD; cursor:pointer; > th:first-child, td:first-child < width:80%; > table table td < padding:4px 5px; > .table-body < height:100px; overflow:auto; >

HTML Body

body> div id="div1"> table> thead> tr> th>Month th >"savings">Savings  !-- w w w . d e m o2 s . co m-->  tbody> tr> td colspan="2"> div >"table-body"> table> tbody> tr> td>January td>$100  tr> td>February is a long month that seems like it could go on forever! td>$80  tr> td>March td>$180  tr> td>April td>$86  tr> td>May td>$98  tr> td>June td>$29  tr> td>July td>$44  tr> td>August td>$244           

The following iframe shows the result. You can view the full source code and open it in another tab.

html> head> title>Size Limted <table> with defined columns widths meta name="viewport" content="width=device-width, initial-scale=1"> script type="text/javascript" src="https://code.jquery.com/jquery-2.1.0.js" > style id="compiled-css" type="text/css"> #div1 !-- ww w . d e m o 2 s . c o m --> width: 400px; padding: .5px; border: 1px solid red; > colgroup < width: 100%; > #col-1 < width:0*; > #col-2 < width:0*; > table < width: 100%; text-align: left; margin: 0; table-layout: auto; border: 0px; border-radius: 4px; border-collapse: collapse; > thead < background-color: #B2DFFF; border-top-left-radius: 4px; border-top-right-radius: 4px; > th < cursor: pointer; font-weight: normal; color: black; font-weight: bolder; border-bottom: 0; border-right: thin dotted gray; > th:last-of-type < border-right: none; > tbody < overflow-y: scroll; background-color: #F0F0F0; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; > tbody td < display: table-cell; > thead tr < text-align: left; color: white; > td < border-bottom: 0; border-top: 0; border-bottom: 1px solid #e8e8e8; border-right: thin dotted lightgray; line-height: 1em !important; > td:last-child < border-right: none; > th < padding: 4px 5px; > tbody tr:hover th, tbody tr:hover td < background-color: #FFE9CD; cursor: pointer; > th:first-child, td:first-child < width: 80%; > table table td < padding: 4px 5px; > .table-body < height: 100px; overflow: auto; >  body> div id="div1"> table> thead> tr> th>Month th >"savings">Savings   tbody> tr> td colspan="2"> div >"table-body"> table> tbody> tr> td>January td>$100  tr> td>February is a long month that seems like it could go on forever! td>$80  tr> td>March td>$180  tr> td>April td>$86  tr> td>May td>$98  tr> td>June td>$29  tr> td>July td>$44  tr> td>August td>$244            

Related

• CSS right align last two columns of a table with CSS
• CSS select the HTML table’s 2nd column to 5th column in the 2nd row
• CSS set dynamically the width of a html table column according to its text content
• CSS set html table height and column widths
• CSS set html table height and column widths (Demo 2)
• CSS set the width of columns of a table correct in HTML
• CSS sort column in a table having software version numbers

demo2s.com | Email: | Demo Source and Support. All rights reserved.

Источник

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.

Источник

CSS Styling Tables

HTML table model allows us to arrange data in tabular presentation, using a model of horizontal rows and vertical columns. This lesson breaks down the CSS styling properties into their respective groups and shows you how to use them to format HTML tables using CSS instead of HTML tag attributes.

A simple HTML table structure with 3 rows and 3 columns.

HTML Source Code

How to set Table width and height in CSS

To specify Table width and height, use CSS width, height properties. Here the table width as 30% and height of the td set to 40px.

output

Source Code

How to set the table column width in CSS

To specify column width in CSS, use the width property to td.

output

CSS Table Row height

You can set Row Height through CSS line-height property it set to each tr.

When you set this property, each row has heigh of 50 pixel.

CSS Table border

To specify table border in CSS, use the CSS border property.

In the above CSS code, the border property applied to Table,Table Head and each TD.

Full Source

CSS Collapse Table borders

The CSS Collapse property takes two values, separate and collapse.

separate : The separate value forced all cells have their own independent borders and allow spaces between those cells.

collapse : This value collapse all spaces between table borders and cells, so you can see as a single line border.

output

CSS Table Text Align

You can align text horizontally and vertically in CSS. For horizontal alignment you can use CSS text-align property and for vertically you can use vertical-align property.

output

CSS Table Cell Padding

CellPadding is used to control the space between the contents of a Cell and the Cell borders. To specify cell padding in CSS, use the CSS padding property.

output

CSS Table Cell Spacing

The Cellspacing attribute places space around each cell in the table. To specify cell Spacing in CSS, use the CSS border-spacing property.

Источник

CSS Table Size

The width and height of a table are defined by the width and height properties.

The example below sets the width of the table to 100%, and the height of the elements to 70px:

Example

To create a table that should only span half the page, use width: 50% :

Example

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.

Источник

Руководство CSS Tables

Следуйте за нами на нашей фан-странице, чтобы получать уведомления каждый раз, когда появляются новые статьи. Facebook

1- Table borders

В основном, у таблицы имеется 2 вида границы (border) это граница таблицы и граница ячеек, как в изображении ниже:

По умолчанию соседние ячейки не используют одну границу, а имеют отдельные. Так же граница таблицы отделяется от границы ячеек.

      .table1 < border: 1px solid red; >.table1 th < border: 1px solid blue; padding: 5px; >.table1 td 
HTML Table Boder
 
First Name
 
Last Name
 
 
John
 
Smith
 
 
   

CSS border-spacing применяется для чтобы определить расстояние между границами соседних ячеек.

 /* */ border-spacing: 2px; /* horizontal | vertical */ border-spacing: 1cm 2em; /* Global values */ border-spacing: inherit; border-spacing: initial; border-spacing: unset; 

      .table1 < border: 1px solid red; border-spacing: 40px; >.table1 th < border: 1px solid blue; padding: 25px; >.table1 td 
HTML Table Boder-spacing
 
First Name
 
Last Name
 
 
John
 
Smith
 
 
   

      table < border-collapse: collapse; border: 1px solid black; >th, td 
CSS Collapsed Table
 
 
 
border-style:solid; 
border-width:1px; 
border-color:blue;
 
border-style:dashed; 
border-width:1px; 
border-color:red;
 
 
 
border-style:hidden; 
border-width:1px; 
border-color:green;
 
border-style:none; 
border-width:1px; 
border-color:green;
 
 
   

 table < width: 100%; border-collapse: collapse; border: 1px solid black; >th:th:nth-child(1), th:th:nth-child(2) < width: 40%; >th:th:nth-child(3) < width: 20%; >th, td