I have this table
table td {
width: 200px;
text-align: center;
}
.red {
border:1px solid red;
}
<table>
<thead>
<tr>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td class="red">$ 11.122,00</td>
</tr>
<tr>
<td class="red">$ 11.1,00</td>
</tr>
<tr>
<td class="red">$ 11.122,00232</td>
</tr>
<tr>
<td class="red">$ 11.122,00</td>
</tr>
</tbody>
</table>
I need to have my numbers centered in the td itself, but I can't find a way to position the numbers one under another so the end result will look like this
So I need centered text in the td but the number is vertically aligned by the, and the . from the right
So at the end result will be in the centered td:
$ 11.122,00
$ 11.1,00
$ 11.122,00232
I don't need text-align:right on this, because onthat way they will be aligned just right, the numbers will be one under another, but the whole content in the td will be not centered - it will be just right aligned.
If I've understood correctly, you want the cell header centered, and the cells right aligned? If so, just add a style for the th like so:
table td {
width: 200px;
text-align: center;
}
table td span {
width: 50%;
border:1px solid red;
display:inline-block;
text-align:right;
}
.red {
border:1px solid red;
}
<table>
<thead>
<tr>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td class="red">
<span>
$ 11.122,00
</span>
</td>
</tr>
<tr>
<td class="red"><span>$ 11.1,00</span></td>
</tr>
<tr>
<td class="red"><span>$ 11.122,00232</span></td>
</tr>
<tr>
<td class="red"><span>$ 11.122,00</span></td>
</tr>
</tbody>
</table>
Quoting this, since I don't have the right reputation to comment...
Thank you. I thought the same thing you suggest. The problem is that the width is fixed - so what if some number is bigger than the whole width - 50% of the parent ?
Set your parent width to width:auto; and it will actually get the right width based on it's child width. So it wont be a problem if it comes a row with more characters than you want.
Related
I have an image on the upper left of the screen but want to position some text on the evenly opposite side (upper right). But this code positions the subsequent td elements only slightly to the right and a bit lower. Do I need to add an align to the <td> elements?
<table>
<tr>
<td><img src="some_img" style='width:50%; height:50%;' />
<td style="vertical-align:bottom;">t1</td>
</tr>
<tr>
<td></td>
<td>t2</td>
</tr>
<tr>
<td></td>
<td>t3</td>
</tr>
</table>
One closing td is missing, other than that you can use the text-align css property to align the items inside the cell.
If I understand correctly, you may want something like this:
.cell{
width: 50vw;
background: #ccc;
text-align: right;
}
.image{
width:50%;
height:50%;
text-align: left;
}
<table>
<tr>
<td class="cell image"><img src="some_img"/></td>
<td class="cell">t1</td>
</tr>
<tr>
<td class="cell"></td>
<td class="cell">t2</td>
</tr>
<tr>
<td class="cell"></td>
<td class="cell">t3</td>
</tr>
</table>
If I have a fixed length text then I can easily center it for example
However, lets say there are data with variable length,
Centering the content of Nickname will affect readability. Is there a way to pad the content and centering it base on the longest length?
<td>
<div style="padding-left: 30%;">
...content
</div>
</td>
The value "30%" is just rough estimate for nickname.
However this 30 percent will changed if the column is expecting a longer data. What is a good way to programatically determine this value that I put as "30" ?
Update, centering text is not what I am looking for. I want to center text AND left align, centering text alone will give me
Visual representation of what I want
You need javascript to determine the width of the content and the table data width.
var td = document.querySelectorAll('td > div');
var width = 0;
var clientWidth = 0;
// determine the width
[].forEach.call(td, function(e) {
clientWidth = e.parentNode.clientWidth; // the width is the same for all td's
if (e.clientWidth > width) {
width = e.clientWidth;
}
});
// set the padding
[].forEach.call(td, function(e) {
e.style.paddingLeft = (clientWidth - width) / 2 + 'px';
e.style.paddingRight = (clientWidth - width) / 2 + 'px';
});
table {
border-collapse: collapse;
}
th {
text-align: center;
}
th, td {
border: 1px solid #000;
}
td > div {
display: inline-block; /* set this because we want to calculate the width, block element has 100% */
padding: 10px 0;
}
<table style="width: 50%">
<tr>
<th>Nickname</th>
</tr>
<tr>
<td><div>Data 1 Data 1Data 1Data 1</div></td>
</tr>
<tr>
<td><div>Data 2</div></td>
</tr>
<tr>
<td><div>Data 3</div></td>
</tr>
<tr>
<td><div>Data 4</div></td>
</tr>
<tr>
<td><div>Data 5</div></td>
</tr>
<tr>
<td><div>Data 6</div></td>
</tr>
<tr>
<td><div>Data 7</div></td>
</tr>
<tr>
<td><div>Data 8</div></td>
</tr>
</table>
Change the hardcoded table width to see the effect.
you can try by mentioning pixels size
<td>
<div style="padding-left: 30px;">
...content
</div>
</td>
Try this,
td{
padding:5px;
text-align:center;
}
so to make it responsive you should use bootstrap 3
try this you will definitely get your answer
bootstrap tables
and there classes
<tr class="something">
<td class="col-md-2">A</td>
<td class="col-md-3">B</td>
<td class="col-md-6">C</td>
<td class="col-md-1">D</td>
</tr>
Update
Technically this answer is correct but we are unable to see it visually so according to me the best way to do this is to add same left and right padding to both <th> and <td> and remove text-align:center from <th>. This is just my opinion. We will wait and see what others think about it. :)
Instead of adding padding to one side you need to add it both the sides.
table tr td{
padding:5px 15%;
}
I have created a simple example.
table{
width:200px;
}
table tr th{
background:#ccc;
text-align:left;
padding:5px 15%;
}
table tr td{
padding:5px 15%;
background:#eee;
}
<table>
<tr>
<th>Nickname</th>
</tr>
<tr>
<td>One</td>
</tr>
<tr>
<td>Big Name</td>
</tr>
<tr>
<td>A Very Big Name</td>
</tr>
<tr>
<td>This is a very big name</td>
</tr>
</table>
So say I have the following HTML:
<table>
<tr>
<th>Heading:</th><td>text</td>
</tr>
<tr>
<th>Heading 2:</th><td>text</td>
</tr>
<tr>
<th colspan="2">Really long heading:</th>
</tr>
<tr>
<td></td><td>text</td>
</tr>
</table>
This creates a table with two columns, one for headers (left) and one for values (right) - except for one row, where a long header is taking up both columns, and the value is showed in the right most column on the next row. Along with this, I have some styling; most importantly:
td:last-child {
width: 100%;
}
th, td {
white-space:nowrap;
}
This makes it so the right most column takes any extra space. And what I have is working, even though the "really long" header is longer/wider than the header column. However, when I add a few more words to the really long header (but not making it long enough to increase the width of the whole table), after a certain point the width of the left column starts to increase with the length of the long header, decreasing the width of the right column. What's going on?
You can't define width:100% of an cell of a table with multiple column.
You should use colgroup tag to define width of cell:
.col-left {
width: 20%;
}
.col-right {
width: 80%;
}
<table>
<colgroup>
<col class="col-left">
<col class="col-right">
</colgroup>
<tr>
<th>Heading:</th><td>text</td>
</tr>
<tr>
<td colspan="2">Really long heading:</td>
</tr>
<tr>
<th>lorem ispum dolores hello</th><td>text</td>
</tr>
</table>
Another tricks to set a cell at the minimum and obviously the another cell take the rest of the width, are to set the first one at 1px:
table {
width: 200px;
}
th, td {
border: 1px solid #000;
}
th {
width:1px;
}
<table>
<tr>
<th>hello</th>
<td>world</td>
</tr>
<tr>
<td colspan="2">hi</td>
</tr>
<tr>
<td></td>
<td>text</td>
</tr>
</table>
Let's take 4 table columns - ID, Text, Date, Action. In my case table have always constant width - in example 960px.
How can I create such table as :
*-*------------------------------------*----------*----*
|1| Some text... |May 2011 |Edit|
*-*------------------------------------*----------*----*
|2| Another text... |April 2011|Edit|
*-*------------------------------------*----------*----*
As we can see, ID, Date and Action adjust their width to content, Text is as long as possible....
Is that possible to do without setting specific width of columns ? When ID = 123 or Date = November 2011, columns should automatically be wider...
Using a 100% width on the wide td and a fixed width for the table along with white-space:nowrap, this can be done:
Demo
HTML
<table>
<tr>
<td>1</td>
<td width="100%">Some text... </td>
<td>May 2011</td>
<td>Edit</td>
</tr>
<tr>
<td>2</td>
<td width="100%">Another text... </td>
<td>April 2011</td>
<td>Edit</td>
</tr>
</table>
CSS
table
{
...
width:960px;
}
td
{
...
white-space:nowrap;
}
basically, it's just like this: http://jsfiddle.net/49W5A/ - you have to set the cell-width to something small (like 1px) to make them stay as small as possible.
but as you'll see, theres one problem with the date-fields doing a line-wrap. to prevent this, just add white-space: nowrap; for your text-field: http://jsfiddle.net/ZXu7U/
working example:
<style type="text/css">
.table{
width:500px;
border: 1px solid #ccc;
}
.table td{
border: 1px solid #ccc;
}
.id, .date, .action{
width:1px;
}
.date{
white-space: nowrap;
}
</style>
<table class="table">
<tr>
<td class="id">1</td>
<td class="text">Some Text...</td>
<td class="date">May 2011</td>
<td class="action">Edit</td>
</tr>
<tr>
<td class="id">2</td>
<td class="text">Another Text...</td>
<td class="date">April 2011</td>
<td class="action">Edit</td>
</tr>
</table>
My best advice to you is to not touch the widths of the table, the table automatically layouts in a way that does all cells best.
However, if you'd like to push through, I'd use width: 1px; on the cells that needs adjusting (one of each column is enough). Also use white-space: nowrap on all cells. that will make sure the lines don't break.
Try this:
.id, .date, .action is the table cells (td).
CSS:
.id, .date, .action {
width: 1em;
}
It worked for me.
The width:1em will not cut the text but force the width size to the minimum.
The best way that I've found for setting table column widths is to use a table head (which can be empty) and apply relative widths for each table head cell. The widths of all cells in the table body will conform to the width of their column head. Example:
HTML
<table>
<thead>
<tr>
<th width="5%"></th>
<th width="70%"></th>
<th width="15%"></th>
<th width="10%"></th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Some text...</td>
<td>May 2018</td>
<td>Edit</td>
</tr>
<tr>
<td>2</td>
<td>Another text...</td>
<td>April 2018</td>
<td>Edit</td>
</tr>
</tbody>
</table>
CSS
table {
width: 600px;
border-collapse: collapse;
}
td {
border: 1px solid #999999;
}
View Result
Alternatively, you can use colgroup as suggested here.
I have a table with 2 rows and variable columns. I tried width = 100% for the column. So the first content in the view will fit. But suppose if i am changing the contents dynamically then it is not dynamically increase/decrease the HTML table column size.
If you want the cells to resize depending on the content, then you must not specify a width to the table, the rows, or the cells.
If you don't want word wrap, assign the CSS style white-space: nowrap to the cells.
You can try this:
HTML
<table>
<tr>
<td class="shrink">element1</td>
<td class="shrink">data</td>
<td class="shrink">junk here</td>
<td class="expand">last column</td>
</tr>
<tr>
<td class="shrink">elem</td>
<td class="shrink">more data</td>
<td class="shrink">other stuff</td>
<td class="expand">again, last column</td>
</tr>
<tr>
<td class="shrink">more</td>
<td class="shrink">of </td>
<td class="shrink">these</td>
<td class="expand">rows</td>
</tr>
</table>
CSS
table {
border: 1px solid green;
border-collapse: collapse;
width:100%;
}
table td {
border: 1px solid green;
}
table td.shrink {
white-space:nowrap
}
table td.expand {
width: 99%
}
Well, me also I was struggling with this issue: this is how I solved it: apply table-layout: auto; to the <table> element.