How to make the column width of the table fixed?

Question

I want to make the first column to have a fixed width same as the second column by using the following CSS style:

style="width:30%;"

However, every time I put long text on the column, the width still moves. Here's my code:

This one's the content of my body:

    table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
    }
    td, th {
    text-align: left;
    padding: 8px;
    }
    .theader{
    color:#91BE24;
    }
    .table-main{
    border-radius: 10px;
    margin:40px;
    padding:10px;
    margin-left:20px;
    margin-top:5px;
    }
    .permissiontitle{
    margin-left:20px;
    margin-top:20px;
    }

 <div class="container d-content">
	<h1 class="permissiontitle">Permission List</h1>
	<div class="table-main panel panel-default">
		<table class="table table-hover">
			<tr class="theader">
				<th>Title</th>
				<th>Description</th>
			</tr>
			<tr>
				<td style="width:30%;">Sample Title asdasdasdasdasdasdasdadasdasdasdasdadasdasda</td>
				<td style="width:70%;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</td>
			</tr>
			<tr>
				<td>Content 1</td>
				<td>Content 2</td>
			</tr>
			<tr>
				<td>Content 1</td>
				<td>Content 2</td>
			</tr>
			<tr>
				<td>Content 1</td>
				<td>Content 2</td>
			</tr>
			<tr>
				<td>Content 1</td>
				<td>Content 2</td>
			</tr>
			<tr>
				<td>Content 1</td>
				<td>Content 2</td>
			</tr>
			<tr>
				<td>Content 1</td>
				<td>Content 2</td>
			</tr>
		</table>
		</div>
</div>

Answer 1

.thirthy{
width: 30%;
min-width: 30%;
max-width: 30%;
}

The HTML of the <td>looks like this:

<td class='thirthy'>"TEXT"</td>

This could be an option too:

<td style="width:30%;min-width: 30%; max-width: 30%;">Sample Titleasdasdasdasdasdasdasdadasdasdasdasdadasdasda</td>

Answer 2

The browser can ignore these values to try and give you a better outcome. You might want to set min-width and max-width to tray and make it more clear to the browser what you are trying to achieve. Plus you can add the important flag to try for encourage the browser to pay attention. Hence it might look like:

.td-30 {
    width: 30% !important;
    min-width: 30% !important;
    max-width: 30% !important;
}

Then the HTML for the 30% cell would look like:

<td class='td-30'>Sample Title asdasdasdasdasdasdasdadasdasdasdasdadasdasda</td>

Answer 3

add the style to your table, make the word breakline.

.breaked {
  word-break: break-all;
}

table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
    }
    td, th {
    text-align: left;
    padding: 8px;
    }
    .theader{
    color:#91BE24;
    }
    .table-main{
    border-radius: 10px;
    margin:40px;
    padding:10px;
    margin-left:20px;
    margin-top:5px;
    }
    .permissiontitle{
    margin-left:20px;
    margin-top:20px;
    }

	


.breaked {
  word-break: break-all;
}

<div class="container d-content">
	<h1 class="permissiontitle">Permission List</h1>
	<div class="table-main panel panel-default">
		<table class="table table-hover breaked">
			<tr class="theader">
				<th>Title</th>
				<th>Description</th>
			</tr>
			<tr>
				<td style="width:30%;">Sample Title asdasdasdasdasdasdasdadasdasdasdasdadasdasda</td>
				<td style="width:70%;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</td>
			</tr>
			<tr>
				<td>Content 1</td>
				<td>Content 2</td>
			</tr>
			<tr>
				<td>Content 1</td>
				<td>Content 2</td>
			</tr>
			<tr>
				<td>Content 1</td>
				<td>Content 2</td>
			</tr>
			<tr>
				<td>Content 1</td>
				<td>Content 2</td>
			</tr>
			<tr>
				<td>Content 1</td>
				<td>Content 2</td>
			</tr>
			<tr>
				<td>Content 1</td>
				<td>Content 2</td>
			</tr>
		</table>
		</div>
</div>