How to get rid of left space so that text remains right aligned ? Unnecessary space is marked red in picture.
Fiddle: https://jsfiddle.net/ta2vzuta/
<table style="width: 100%">
<tr>
<td class="labels"> some text here </td>
<td> input field </td>
<td class="labels"> some text here </td>
<td> input field </td>
</tr>
<tr>
<td class="labels"> text </td>
<td> input field here </td>
<td class="labels"> text here </td>
<td> input field </td>
</tr>
</table>
EDIT: Is it possible that the <td class=labels> will be adjusted to text length ? So that you don't need to set the fixed length ?
In table cells, the width property only specifies a preferred width. But if you use the default automatic table layout, the cells will grow to be at least the minimum width required by the contents.
So you can use
.labels {
width: 0; /* As narrow as possible */
white-space: nowrap; /* Without inserting line breaks */
}
.labels {
text-align: right;
font-weight: bold;
width: 0;
white-space: nowrap;
}
<table style="width: 100%">
<tr>
<td class="labels"> some text here </td>
<td> input field </td>
<td class="labels"> some text here </td>
<td> input field </td>
</tr>
<tr>
<td class="labels"> text </td>
<td> input field here </td>
<td class="labels"> text here </td>
<td> input field </td>
</tr>
</table>
use a combination of width:50% on td and width:auto on .label
like this:
https://jsfiddle.net/grassog/udhwh388/2/
Related
In the below HTML fragment, how can I make the width of a column that contains 'LAST' occupy the remainder of the row, and widths of columns that contain 'COLUMN ONE' and 'COLUMN TWO' be just wide enough to contain their content, and not larger.
Thank you
table {
border-collapse: collapse;
}
table td {
border: 1px solid black;
}
<table>
<tr>
<td>
<table width="100%">
<tr>
<td>
<span>
COLUMN
</span>
<span>
ONE
</span>
</td>
<td>
COLUMN TWO
</td>
<td>
LAST
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
ANOTHER ROW
</td>
</tr>
</table>
You will need to tell the first two columns not to wrap and give the last column a width of 99%:
<table width="100%">
<tr>
<td style="white-space: nowrap;">
<span>
COLUMN
</span>
<span>
ONE
</span>
</td>
<td style="white-space: nowrap;">
COLUMN TWO
</td>
<td width="99%">
LAST
</td>
</tr>
</table>
Edit: You should put that all styles / presentation in (external...) css.
Using classes for the columns (you could use css3 selectors like nth-child() instead if you only target modern browsers):
html:
<tr>
<td class="col1">
// etc
css:
.col1, .col2 {
white-space: nowrap;
}
.col3 {
width: 99%;
}
I have a table with one row and two cells. I would like to get an input text field to be as wide as possible. How could do it that way?
( 0 )Text, text, text...
The main problem is that the width of the text input box is too much.
Here is the code:
<table style="width:400px">
<tr>
<td style="width:200px">
(<input type="text" name="num" value="0" class="kentta" />)
</td>
<td style="width:200px">
Text, text, text...
</td>
</tr>
</table>
And CSS code:
.kentta {
width: 100%;
padding: 1px;
border: none;
box-sizing: content-box;
height: 18px;
vertical-align: middle;
text-align: center;
line-height: 18px;
}
Instead of pixels, you can achieve it by using percentage of the width.
As give below
<table style="width:100%">
<tr> This will grow as large as.
<td style="width:80%"> <----'
<input type="text" name="num" value="0" style="border:none;text-align:center" />
</td>
<td style="width:20%">
Text, text, text...
</td>
</tr>
</table>
It is maximum for any table data.Use this on browser on 100% width.
<table style="width:100%">
<tr>
<td>
(<input type="text" name="num" value="0" style="border:none;text-align:center;width:98%;" />)
</td>
<td>
Text, text, text...
</td>
</tr>
Is
border-collapse:collapse;
and
border-spacing: 0px; /* only active/useful with option "separate" */
border-collapse:separate;
the same?
They are Different! (See Snippet below to confirm).
According to MDN here and here
The border-collapse CSS property determines whether a table's borders
are separated or collapsed. In the separated model, adjacent cells
each have their own distinct borders. In the collapsed model, adjacent
table cells share borders.
and
The border-spacing CSS property specifies the distance between the
borders of adjacent table cells (only for the separated borders
model). This is equivalent to the cellspacing attribute in
presentational HTML, but an optional second value can be used to set
different horizontal and vertical spacing.
The border-spacing value is also used along the outside edge of the
table, where the distance between the table's border and the cells in
the first/last column or row is the sum of the relevant (horizontal or
vertical) border-spacing and the relevant (top, right, bottom, or
left) padding on the table.
This property applies only when border-collapse is separate.
So here is a SNIPPET with a few examples
body {
margin: 0;
font-family: Arial;
}
table {
width: 100%;
margin:30px 0
}
td {
border: 1px solid red
}
.collapse {
border-collapse: collapse;
}
.separate {
border-collapse: separate;
}
.no-spacing {
border-spacing: 0
}
.spacing {
border-spacing: 10px
}
<h4>Borders will collapse and therefore no space between them</h4>
<table class="collapse no-spacing">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<h4>Borders will try to separate between them but then using border-spacing:0 will join the borders without collpasing (looking like has double borders)</h4>
<table class="separate no-spacing">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<hr />
<h3> 2 more examples </h3>
<h4>Border-spacing won't work due to only applies when border-collapse isset to separate</h4>
<table class="collapse spacing">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<hr />
<h4>Borders will separate between them due to having border-spacing:10px and because border-collapse has separate as initial value</h4>
<table class="spacing">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
I have the folowing:
<tr>
<td class="neighbor">
text
</td>
<td id="aim">
text
</td>
<td class="neighbor">
text text
</td>
</tr>
<tr>
<td id="text" colspan="3">
some long text
</td>
</tr>
How do I let the content of #text be centered based on #aim? note that .neighbor tds are not equal spaced.
Simply fill in the blank tags on either side of text instead of using a colspan. This will place the columns beneath each other.
css:
#aim, #text
{
text-align: center;
}
html:
<tr>
<td class="neighbor">
text
</td>
<td id="aim">
text
</td>
<td class="neighbor">
text text
</td>
</tr>
<tr>
<td>
</td>
<td id="text">
some long text
</td>
<td>
</td>
</tr>
If your goal is not to center the text in this way please provide a quick image of how it should look.
In the below HTML fragment, how can I make the width of a column that contains 'LAST' occupy the remainder of the row, and widths of columns that contain 'COLUMN ONE' and 'COLUMN TWO' be just wide enough to contain their content, and not larger.
Thank you
table {
border-collapse: collapse;
}
table td {
border: 1px solid black;
}
<table>
<tr>
<td>
<table width="100%">
<tr>
<td>
<span>
COLUMN
</span>
<span>
ONE
</span>
</td>
<td>
COLUMN TWO
</td>
<td>
LAST
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
ANOTHER ROW
</td>
</tr>
</table>
You will need to tell the first two columns not to wrap and give the last column a width of 99%:
<table width="100%">
<tr>
<td style="white-space: nowrap;">
<span>
COLUMN
</span>
<span>
ONE
</span>
</td>
<td style="white-space: nowrap;">
COLUMN TWO
</td>
<td width="99%">
LAST
</td>
</tr>
</table>
Edit: You should put that all styles / presentation in (external...) css.
Using classes for the columns (you could use css3 selectors like nth-child() instead if you only target modern browsers):
html:
<tr>
<td class="col1">
// etc
css:
.col1, .col2 {
white-space: nowrap;
}
.col3 {
width: 99%;
}