- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Controlling Table Layout in CSS
The CSS table-layout property is to define the algorithm to be used by the browser for laying out rows, columns, and cells of a table. Through this, you can control the table layout.
Syntax
The syntax of CSS table-layout property is as follows −
Selector {
table-layout: /*value*/
}The following examples illustrate CSS table-layout property −
Example
<!DOCTYPE html>
<html>
<head>
<style>
table {
margin: 2em;
display: inline-block;
border: 1px solid black;
}
td {
border: 1px solid black;
}
#one {
table-layout: auto;
width: auto;
}
#one + table {
table-layout: fixed;
width: 100px;
}
</style>
</head>
<body>
<h2>Table Layouts and its working in CSS</h2>
<table id="one">
<caption>Cricketers</caption>
<tr>
<td>ShaneWarne</td>
</tr>
<tr>
<td></td>
<td>Adam</td>
</tr>
<tr>
<td></td>
<td>Shimron Hetmyer</td>
<td></td>
</tr>
</table>
<table>
<caption>Cricketers</caption>
<tr>
<td>ShaneWarne</td>
</tr>
<tr>
<td></td>
<td>Adam</td>
</tr>
<tr>
<td></td>
<td>Shimron Hetmyer</td>
<td></td>
</tr>
</table>
</body>
</html>Output
This gives the following output −
Example
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: auto;
width: 50%;
box-shadow: inset 0 0 14px orange;
}
td {
box-shadow: inset 0 0 5px lime;
white-space: nowrap;
outline: thin dotted;
}
table {
border: 3px solid black;
table-layout: fixed;
width: 100%;
}
</style>
</head>
<body>
<div>
<table>
<caption>Demo Caption</caption>
<tr>
<td>ABCD</td>
</tr>
<tr>
<td></td>
<td>EFGH</td>
</tr>
<tr>
<td></td>
<td>IJKLM NOPQRST</td>
<td></td>
</tr>
</table>
</div>
</body>
</html>Output
This gives the following output −
Published on 06-Jan-2020 10:50:24
- Related Questions & Answers
- Controlling Table Layout using CSS
- Usage of CSS table-layout property
- Controlling the Position of Table Caption using CSS
- Controlling Pagination with CSS
- CSS Grid Layout
- CSS Flexbox Layout Module
- Controlling the Visibility of Elements using CSS
- Controlling the Dimensions of Flex Items in CSS
- Advance CSS layout with flexbox
- Controlling the Visibility of elements Working with CSS
- Create a Column Layout using CSS
- Set areas within the grid layout in CSS
- How to add table rows Dynamically in Android Layout?
- Define the number of columns in CSS Grid Layout
- Controlling Whether Mouse & Touch Allowed with CSS pointer-events Property
Advertisements