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
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.
<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
I'm trying to make 2 separate tables to echo results of drinkers and their drinks from a bar.
The tables have alternating backgrounds using nth-child(odd), nth-child(even) which is working fine.. its just getting them to align through different browsers and getting rounded corners.
I've tried using nth-last-child(1)..etc but still no tidy solution.
Here's where I'm at so far..
http://giblets-grave.co.uk/index3.php
and this is what its ment to look like:
http://giblets-grave.co.uk/img/1400x900_GG-desktop_design_final.jpg
Take a look at my current css at /css/main2.css
I've not seen your code, but I mocked up a similar scenario.
HTML
<div id="main">
<div id="first">
<table>
<tr>
<td>A</td>
<td>B</td>
</tr>
</table>
</div>
<div id="second">
<table>
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
</tr>
</table>
</div>
</div>
As you can see, the height of the second table is "dynamic", and it could be longer than the first table, doesnt matter.
The CSS
#main {
width:500px;
overflow:hidden;
}
#first, #second {
padding-bottom: 1000px;
margin-bottom: -1000px;
float: left;
}
#first {
float:left;
width:100px;
overflow:auto;
}
#second {
width:400px;
float:left;
}
Thus far, what you have is the #first parent to follow the height of the #second. Reference
Fiddle
So what now? The #first follows the height of the #second, but the #first_child does not follow the height of #first. However, HTML tables does not follow parents div's heights. Reference
Answer: Javascripts.
You first want to detect the height of the #second, and then auto adjust the height of the #first_child to follow the height of the #second.
var second_height = $("#second").height();
var table_height = second_height;
$("#first_child").height(table_height);
Solution
Hope this is what you're looking for.
Is there a standard method for calculating fixed width values for tables in HTML? Right now, I'm working on formatting tables on a web page to be a fixed width, I have a table that's within another table, when testing the page in IE I notice that the alignment of the colon is off as the second picture below illustrates. My intention is to make sure the colons are properly aligned as they are in Firefox and was just curious if the misalignment was due to the settings in the HTML or if it has more to do with how the browser renders the page.
Firefox:
Internet Explorer:
UPDATE:
Sorry for not providing any reference code, here's a snippet of the particular section I'm working with.
<div style="width: 1600px; text-align: center; position: absolute; top: 10%; left: 0%;">
<span id="labelInstructions" style="font-size: xx-large;">PAGE TITLE <br><br></span>
<table style="width: 1000px;" align="Center" border="0">
<tbody>
<tr>
<td style="width: 1000px;"><label for="FileUpload1" style="font-size: x-large;">ENTER: </label><input name="FileUpload1" id="FileUpload1" size="70%" type="file"></td>
</tr>
<tr>
<td style="width: 1000px;"><span id="fileUploadError" style="color: Red; font-size: medium;"><br><br></span></td>
</tr>
<tr>
<td style="width: 1000px;">
<table style="width: 1260px;" border="0">
<tbody>
<tr>
<td style="font-size: x-large; width: 800px;" align="right" valign="top">FILE INSTRUCTIONS:</td>
<td style="font-size: x-large; width: 1800px;" align="left" valign="top">INSTRUCTION 1<br>INSTRUCTION 2<br></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td style="font-size: x-large; width: 800px;" align="right" valign="top">FILE EXAMPLE:</td>
<td style="font-size: x-large; width: 1800px;" align="left" valign="top">EXAMPLE 1<br>EXAMPLE 2<br><br></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
I know it's ugly, just a note, this is an ASP.Net generated webpage and I'm setting the attributes of the HTML elements pro-grammatically from the code behind. I sorta inherited this and my employer wants to keep major changes to a minimum.
UPDATE 2:
When I adjust the inner table width I can get it to align in IE when set to 1377px. For Firefox, the sweet spot for alignment is 1260px.
All you have to do is make the table columns the same width as each other.
Example of style:
table tr td:first-child { background-color:yellow; width:200px; }
HTML:
<table>
<tr><td>Row 1 Cell 1</td><td>Row 1 Cell 2</td></tr>
<tr><td>Row 2 Cell 1</td><td>Row 2 Cell 2</td></tr>
<tr><td>Row 3 Cell 1</td><td>Row 3 Cell 2</td></tr>
</table>
Sorry for not directly answering to your question, but...
Stoneage is over! You really shouldn't use Tables for layouting-purposes, as they are hardly-accessible for disabled people and make your HTML-File way too big (in relation to the content).
Seperate Content and Layout, use CSS.
Make sure to place the the parts that you want to align together in one table.
<table id="layout">
<tr><td>HEADER</td>
<tr><td>
<table id="form">
<tr><td>LABEL</td><td>INPUT FIELD</td></tr>
<tr><td>LABEL</td><td>INPUT FIELD</td></tr>
<tr><td>LABEL</td><td>INPUT FIELD</td></tr>
</table>
</tr>
<tr><td>FOOTER</td>
</table>
i would create two classes, left and right and apply the left class to the <td> on the left and the right class to the <td> on the right. the left class would be something like
.left{width:100px; text-align:right;}
heres an example
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.