Top community members
All Questions Ask Question

Welcome to Dirask IT community! ❀ đŸ’»
We are community of people that helps each other.

If you think you have some skills to help others

help someone and become a part of our community - List Q & A

How to create table with same width / size of columns in html and css?

1 answers
4 points

I try to create table that has same width of each column (I am looking for CSS solution) - even content is too big, beacuse will be cut and replaced with dots (...) with styles.

This is my table:

I know there is posible to set fixed width or with percents, but width of table and number of colums can be different.

Code:

// ONLINE-RUNNER:browser;

<style>

  table {
      width: 100%;
  }
  
  td {
      border: 1px solid red;
      width: auto;
  }

</style>
<table>
	<tbody>
		<tr>
			<td>zzzzzzzz</td>
			<td>bbbbbbbb</td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td>cccccccc</td>
			<td>dddddddd</td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td>eeeeeeee</td>
			<td>oooooooo</td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
	</tbody>
</table>
1 answers
3 points

table-layout: fixed; style property for table element solvers yours problem.

Example:

// ONLINE-RUNNER:browser;

<style>

  table {
      width: 100%;
      table-layout: fixed;
  }
  
  td {
      border: 1px solid red;
      width: auto;
  }

</style>
<table>
	<tbody>
		<tr>
			<td>zzzzzzzz</td>
			<td>bbbbbbbb</td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td>cccccccc</td>
			<td>dddddddd</td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td>eeeeeeee</td>
			<td>oooooooo</td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
	</tbody>
</table>
0 comments Add comment

Checkout latest Findings & News:

Checkout latest questions:

Checkout latest wiki articles:

Hey 👋
Would you like to know what we do?
  • Dirask is IT community, where we share coding knowledge and help each other to solve coding problems.
  • We welcome everyone,
    no matter what the experience,
    no matter how basic the question is,
    this community will help you.
Read more