User1899289003 User1899289003 - 10 months ago 42
HTML Question

How to change table row width

I have a HTML responsive table with Bootstrap styles, the problem is that some cell can have a lot of text, as a result of this my cell looks like this:



....enf of text


And what I expect is something like this:

(align center)Header

text.................end of text here.

I tried adding width style to all the "td", adding "col-md", but nothing works, here is my table:

<link href="" rel="stylesheet" />
<script src=""></script>
<script src=""></script>

<div class="container">
<div class="panel panel-info">
<div class="panel-heading">
<div class="panel-body">
<div class="col-md-12">
<div class="table-responsive">
<table class="table">
<td><span class="glyphicon glyphicon-cog"></span>
<td>Quality Alert New</td>
<td>On approve</td>
<td><span class="glyphicon glyphicon-pencil"></span>

In other words I want to show the table like in the Snippet code, but if you see it in full-page you can see my problem, what can I do?

Answer Source

Just add the property : white-space: nowrap; to your table or the cells you want to have dinamyc width.

.table { width: 100%; max-width: 100%; margin-bottom: 20px; white-space: nowrap; }