HTML

CSS Setting Table Column Width

<table border="1" width="100%">
	<col style="width:40%">
	<col style="width:30%">
	<col style="width:30%">
	<thead>
	<tr>
		<th>Fruits</th>
		<th>Vitamin A</th>
		<th>Vitamin C</th>
	</tr>
	</thead>
	<tbody>
	<tr>
		<th>Apples</th>
		<td>98 ui</td>
		<td>8.4 mg</td>
	</tr>
	<tr>
		<th>Oranges</th>
		<td>295 ui</td>
		<td>69.7 mg</td>
	</tr>
	<tr>
		<th>Bananas</th>
		<td>76 ui</td>
		<td>10.3 mg</td>
	</tr>
	</tbody>
</table>

css table fixed column width

table {
	table-layout: fixed;
}

td {
	overflow: hidden;
    width: 100px;
}

set table column width

<!--Simple table with column width-->
<table>
    <colgroup>
       <col span="1" style="width: 15%;">
       <col span="1" style="width: 70%;">
       <col span="1" style="width: 15%;">
    </colgroup>
	<!--Put <thead> and <tr>'s here-->
    <tbody>
       <td>From</td>
       <td>Subject</td>
       <td>Date</td>
    </tbody>
</table>
<!--This code ensures that the columns span one column each (span attribute)-->
<!--Width attribute can be pixel too.-->

data table column width

$('#example').dataTable({
  "columnDefs": [    
    { "width": "20%", "targets": 0 }  
  ]} 
);

change table column width css

table {
  border: 1px solid black;
  table-layout: fixed;
  width: 200px;
}

th,
td {
  border: 1px solid black;
  width: 1000px;
  overflow: hidden;
}

change table column width css

<table>
  <tr>
    <th>header 1</th>
    <th>header 234567895678657</th>
  </tr>
  <tr>
    <td>data asdfasdfasdfasdfasdf</td>
    <td>data 2</td>
  </tr>
</table>
 Run code snippetHide results