<h3>Mijn biedingen</h3>
<table class="table table-responsive">
<thead>
<tr>
<th>nummerplaat</th>
<th>Bod</th>
<th>Status</th>
<th>Datum bod</th>
<th>Aankoopdatum</th>
</tr>
</thead>
<tbody>
<tr>
<td>THOMAS</td>
<td>€ 90 000,00</td>
<td>open</td>
<td>15/10/2014</td>
<td>
Niet beschikbaar
</td>
</tr>
</tbody>
</table>
This is my code, this is the result: https://www.dropbox.com/s/6vkc2mpu7z4yqgq/Screenshot%202014-10-15%2019.28.09.png?dl=0
How can I have the money TD on one line? This website is responsive but the the text becomes in two lines because of the spaces in the text.
If you want to have the text in same line use CSS style
white-space:nowrap;
eg:
<span class="nowrap">Your text here</span>
In CSS style sheet
.nowrap {
white-space:nowrap;
}
Bootstrap way of doing it
Since you already have bootstrap, no need of class definition, you can use class text-nowrap
Just try this in your td or if doesn't work try adding a span around your text and assign the class
eg:
<td class="text-nowrap"> Your text </td>
or
<td> <span class="text-nowrap">Your text </span></td>
You can also have it in the table tag, so that no need to add in each element
eg: <table class="text-nowrap"> .... </table>
More on this in Bootstrap documentation Check under Alignment classes
Bootstrap 4 documentation here
Bootstrap 5 documentation here
Bootstrap 4.
Can be applied to an entire table as well if you don't need to support multiple long text:
<table class="table text-nowrap">
https://jsfiddle.net/439dg2k0/1/
Use instead of space
Related
I need to hide td in the body if the th in the head has the class .isSystem
Is this possible in straight CSS?
More info: the table is built dynamically. The head/columns is an array... and the tbody/rows is another array. I'm using Angular/typescript...
I tried this: th.isSystem ~ td { text-decoration: line-through; color: red; }
If the table is built dynamically, then the obvious way is to use col rather than th to drive this behaviour. <col> elements have special powers which enable them to affect the cells they belong to.
table {border:1px outset;}
th, td {border:1px inset;}
col.isSystem {visibility:collapse;}
<table>
<col/><col class="isSystem"/><col/><col/>
<thead>
<tr><th>One</th> <th>Two</th> <th>Three</th> <th>Four</th></tr>
</thead>
<tbody>
<tr><td>This</td> <td>This</td> <td>This</td> <td>This</td></tr>
<tr><td>is</td> <td>is</td> <td>is</td> <td>is</td></tr>
<tr><td>the</td> <td>the</td> <td>the</td> <td>the</td></tr>
<tr><td>first</td> <td>second</td><td>third</td> <td>fourth</td></tr>
<tr><td>column</td><td>column</td><td>column</td><td>column</td></tr>
</tbody>
</table>
Disclaimer: this works as advertised in Firefox, IE11 and Edge. Chrome however... sorry.
Bottom Line:
No, because <td> and <th> can not be siblings since they are not proper children of a <table> and even if your source markup has them that way - the browser will adjust the markup and overrule your styles.
Long explanation:
Looking at a more JS related SO question on the subject, the browser automatically will inject <thead> and <tbody> around your <th> and <tr> (subsequently <td>) elements. <thead> and <tbody> are valid child elements of <table> - <th> and <tr> are not.
As a result, finding the siblings of <th> will only return other th tags, since they technically live in a <thead> - the <td> are in a <tr> in <tbody>
Take a look at these examples:
Example 1
Codepen with straight <th> and <tr> elements
.isSystem + .row { background:red }
<table>
<th class="isSystem">Table Heading</th>
<tr class="row">
<td>Table Item</td>
</tr>
</table>
<div class="isSystem">Div Heading</div>
<div class="row">Div Item</div>
In this example, you would expect the table row to be red... The div elements in the example do this but the <tr> doesn't
Example 2
Codepen with proper <thead> and <tbody> elements
In example 2, wrapping the table with the correct thead and tbody elements, you can acheive this:
.isSystem + .rows tr { background:red; }
<table>
<thead class="isSystem"><th>Heading</th></thead>
<tbody class="rows">
<tr class="row"><td>Item</td></tr>
</tbody>
</table>
Unfortunately if your items are dynamically generated and you can not apply your classes in this way, then your only option will be using JS to target your elements as others have already mentioned. However, I would do what's possible to create proper semantic markup first.
I have three entities in a row, currently I use table to display them:
<table>
<tbody>
<tr>
<td id='td1'>some text</td>
<td id='td2' style='width:600px;'>some text</td>
<td id='td3'>some text</td>
</tr>
</tbody>
</table>
What I need is to resize left and right cells simultaneously when browser resizes. I wonder if it is possible without JS.
I have even tried CSS resize which apparently does not work in IE, played with widths of the cells, but still without any success. I am totally a newbie in CSS.
Is it even possible? Thanks in advance.
Can't verify since I'm on a mobile but have you tried....
<table>
<colgroup>
<col class="first" />
<col />
<col class="last" />
</colgroup>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
Then use the col.first and col.last classes to style them with css.
W3C: http://www.w3.org/TR/html-markup/col.html
Oh, and, remove all the css from your html. Having css inline will make the document completely unmaintainable through css files. And remove the IDs also from td:s and always use " to quote html attribute values.
You can also try to add:
table {
table-layout: fixed;
}
To prevent the browser from calculating the initial width of each cell according to their contents and give them all initially an equal width. (height will still expand according to content.) Then override certain columns with css.
try this css
table{
width:100%;
}
it works.
I have a div with a small width and an overflow visible. I have inside a larger table with only one cell and a text inside:
<div style="overflow:visible;width:0px;">
<table>
<tr>
<td style="border:solid">
A small text with spaces...
</td>
</tr>
</table>
</div>
I would like the width of the table to be set automotically as the text width but without breaking line. i.e. I would like to have the same result I would have if I writed only:
<table>
<tr>
<td style="border:solid">
A small text with spaces...
</td>
</tr>
</table>
How can I set the table to not be "of minimum width" without specifying a precise witdh?
I think your answer is here: Object larger than outside div
It uses the position absolute to remove the stipulations of the containers surrounding it. The one issue then is positioning, but You can fix that with setting the left and top CSS rules.
jsfiddle example
<div style="overflow:visible;width:0px;">
<table>
<tr>
<td style="border:solid;position:absolute;">
A small text with spaces...
</td>
</tr>
</table>
</div>
<div style="overflow:visible;width:0px;padding-top:30px;">
<table>
<tr>
<td style="border:solid;white-space:nowrap;">
A small text with spaces...
</td>
</tr>
</table>
</div>
EDIT
As said in a comment above by "insertusernamehere": "white-space:nowrap;" works as well.
NOTE:
Tables are not the best thing to use. Use DIV's and set the `"float:left/right;" CSS style so that they mimic tables. It is easier to code (for me at least, it takes some getting used to at first.) but it is much more browser friendly and you have more room to play in.
The content text in 1st td of table is very long, there is no spaces between. Then i applied word-wrap:break-word. but this is not working. Can anybody experience the below problem.
Please suggest the solution.
Here is my Code:
http://jsfiddle.net/F556F/2/
<div>
<table border=1 width=100%>
<tr>
<td>12345678890123456788901234567889012345678890123456788901234567889012345678890</td>
<td>SECOND</td>
</tr>
</table>
</div>
CSS:
div{width:300px}
table tr td{width:50%;overflow:hidden;background-color:#ccc;width:200px;word-wrap:break-word}
table-layout: fixed will help you: fiddle example
Hi now give to this text in div class as like this
<div>
<table border=1>
<tr>
<td><div class="ok">12345678890123456788901234567889012345678890123456788901234567889012345678890</div></td>
<td>SECOND</td>
</tr>
</table>
</div>
than define .ok style
Live demo
Is there a way to vertically stack selected td elments? I would like to have the same table, though display it differently using only css. Would this be possible, or do I have to have separate html markups? I would like to try to have the same html markup, though use different css for different sites/looks.
<table>
<tr>
<td class="vertical" id="one" >i'm</td>
<td class="vertical" id="two" >above</td>
<td class="vertical" id="three" >this</td>
<td class="horizontal" id="four" >i'm horizontal</td>
</tr>
</table>
You can also make them display:block but I''m not quite sure what effects this would hev on table lay-out.
.vertical{
display:block;
}
For others trying to achieve this, for any weird reason, you could use
.vertical{
display:flex;
}
https://jsfiddle.net/mr5dhwj3/
I needed this in a responsiveness situation where the table was rendered horizontally normally, but only vertically in some cases.
You need to create the table stacked
<table>
<tr>
<td class="vertical">i'm</td>
<td class="horizontal" rowspan="3">i'm horizontal</td>
</tr>
<tr>
<td class="vertical">above</td>
</tr>
<tr>
<td class="vertical">this</td>
</tr>
</table>
That is what tables are made for.
If you want to use CSS you have to use DIVs.