<tr>
<td>abc <span>123</span></td>
<td>another td</td>
<td>another td</td>
</tr>
Why my above code the span of the first td doesn't generate properly?
I want to have the result like this
=============================================
abc = another td = another td =
123
=============================================
Use css display property to archive this,
view this jsFiddle
CSS
td{
vertical-align: top;
}
td span {
display:block;
}
HTML
<table>
<tr>
<td>abc <span>123</span></td>
<td>another td</td>
<td>another td</td>
</tr>
</table>
Using a span tag does not deliver a result like you want. You need to have CSS rule for that.
add the following CSS to your page,
td {
width: 100px;
}
td span {
word-wrap: break-word;
display: block;
}
This sets a width for elements and the span is used to break the text line and move it to the next line.
Related
This question already has answers here:
Table cell width is ignored depending on input width set on unrelated row
(1 answer)
Table cell element ignoring width in CSS
(4 answers)
Why is my HTML table not respecting my CSS column width?
(10 answers)
Closed 3 months ago.
I was just going through this Github doc when I noticed the table was hard to read and started poking around the CSS to make it more eye appealing.
However, I realised that the td elements in the table were not respecting any width properties that I set. To reproduce the issue, I created this codepen. The styles in the codepen are from the Github docs.
The codepen has 2 tables: one whose contents contain a pre and a code tag and another which contains plain text. I have added an additional style in my codepen for all td elements: width: 50%. The first table does not respect this style while the second one does. Can anyone tell me why? Also, is there any explanation to why all the cells in the first table are affected and do not respect the width when only one cell has the pre and code tags?
Edit: Here's a code sample:
:root {
--color-border-muted: #21262d;
--color-canvas-default: #0d1117;
--color-fg-default: #c9d1d9;
--color-canvas-subtle: #161b22;
--color-border-default: #30363d;
}
body {
/* Styles from Githun docs */
color-scheme: dark;
}
* {
box-sizing: border-box;
}
table {
/* Styles from Githun docs */
display: table;
border-collapse: collapse;
position: relative;
font-size: 90%;
width: 100%;
line-height: 1.5;
table-layout: auto;
word-wrap: break-word;
color: var(--color-fg-default);
}
table tr {
/* Styles from Githun docs */
background-color: var(--color-canvas-default);
border-top: 1px solid var(--color-border-muted);
}
td {
/* STYLE THAT MARKS THAT CELL WIDTH SHOULD ONLY BE 50% */
width: 50%;
border: 1px solid var(--color-border-muted);
padding: 0.5rem;
}
pre {
/* Styles from Githun docs */
padding: 16px;
overflow: auto;
line-height: 1.45;
background-color: var(--color-canvas-subtle);
border-radius: 6px;
margin-top: .5rem;
border: 1px solid var(--color-border-default);
word-wrap: normal;
}
<table>
<tbody>
<tr>
<td>Hello Margarita tula pera kola papaya. sdkjcnskdcn kjsdnckcnskdjnc k ckjdc ksdc kdjc kd ckd cksdj cjkd c sdk cskdjc kjd ckdj ckdjsc ksdjc kdjc dksc kdj c</td>
<td>World</td>
</tr>
<tr>
<td>Hello</td>
<td>World</td>
</tr>
<tr>
<td>Hello</td>
<td>World</td>
</tr>
<tr>
<td>Hello</td>
<td>World</td>
</tr>
</tbody>
</table>
<br />
<table>
<tbody>
<tr>
<td>Hello Margarita tula pera kola papaya. sdkjcnskdcn kjsdnckcnskdjnc k ckjdc ksdc kdjc kd ckd cksdj cjkd c sdk cskdjc kjd ckdj ckdjsc ksdjc kdjc dksc kdj c</td>
<td>World</td>
</tr>
<tr>
<td><pre><code class="hljs language-yaml"><span class="hljs-attr">run-name:</span> <span class="hljs-string">${{</span> <span class="hljs-string">github.actor</span> <span class="hljs-string">}}</span> <span class="hljs-string">is</span> <span class="hljs-string">learning</span> <span class="hljs-string">GitHub</span> <span class="hljs-string">Actions</span> <span class="hljs-string">Actions</span> <span class="hljs-string">Actions</span> <span class="hljs-string">Actions</span> <span class="hljs-string">Actions</span> <span class="hljs-string">Actions</span></code></pre></td>
<td>World</td>
</tr>
<tr>
<td>Hello</td>
<td>World</td>
</tr>
<tr>
<td>Hello</td>
<td>World</td>
</tr>
</tbody>
</table>
TLDR: In the codepen the table with pre and code tags in cells does not respect the width: 50% style set on cell elements (td). Why?
Credits: #CBroe
In the above CSS, there is one specific style that was responsible for the width not being respected:
table {
.
.
.
table-layout: auto;
.
.
}
As mentioned in the Mozilla docs, a value of auto to table-layout results as follows:
By default, most browsers use an automatic table layout algorithm. The widths of the table and its cells are adjusted to fit the content.
This means that in auto, the content decides the layout. As mentioned in w3schools:
Browsers use an automatic table layout algorithm. The column width is set by the widest unbreakable content in the cells. The content will dictate the layout
So, you can replace it with table-layout:fixed to set your own width.
Note: Simply removing the style table-layout: auto will not do since the browser uses it as the default style. A value of fixed needs to be explicitly passed.
Every time I have a unicode symbol in one table cell,
vertical-align: middle;
in my CSS stops working. As a result, the text "floats higher" than middle.
Notice how text in the upper row is vertically aligned in the middle, whereas Sun Jun 4 23:52:31 2017 in the lower row floats higher than middle because of the folder unicode symbol.
Relevant part of CSS
table, td, th {
border: 2px solid #D0D0D0;
}
table {
border-collapse: collapse;
}
td {
vertical-align: bottom;
}
Relevant part of HTML
<td>📂 viz_coreOpt_3D<span style="float:right;">  Sun Jun 4 23:52:31 2017</span></td>
The folder icon is the reason that one line in height exceeds the other. I suggest to set the line height not less than the height of the icon.
table, td, th {
border: 2px solid #D0D0D0;
}
table {
border-collapse: collapse;
}
td {
line-height: 1.5em;
vertical-align: bottom;
}
<table>
<tr>
<td>
📂 viz_coreOpt_3D
<span style="float:right;">  Sun Jun 4 23:52:31 2017</span>
</td>
</tr>
</table>
Are you using the tag? You should be as you need to let the table know how to separate your rows.
your table setup in html should look something like this:
<table>
<thead> <!-- this is optional -->
<tr>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody> <!-- once again this is optional -->
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
this will give you a table with two rows. One a header row and one a normal row. if you want them to be aligned within the boxes you can center the text with text-align: center; to the middle of the cell width wise and then use vertical-align: middle; to make it align vertically within the cell of the table.
what is causing the problem with your initial solution is the use of float. This will move it to the right and the top of the element because float
I would like to create a table header row that includes a title on the left as well as "Sample header" on the right. For accessibility and to be semantically correct, the title should probably be in a <caption> tag, but "Sample header" isn't part of the title so it probably shouldn't be inside of <caption>. The caption can't be inside the row since it has to be the first element after <table>.
Here is the HTML structure:
<table>
<caption>Caption</caption>
<thead>
<tr class="sample">
<th colspan="2">Sample header</th>
</tr>
<tr>
<th>Column1</th>
<th>Column2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data1</td>
<td>Data2</td>
</tr>
</tbody>
</table>
The caption ends up as a separate line above the table, while I would like it to be on the same line as "Sample header".
Here is a sample of what I'm trying to achieve: http://jsfiddle.net/vueLL5ce/5/. It sets 'caption`'s position to relative and manually moves it where I want. The two main problems with this approach is that repositioning the caption still leaves its original space above the table and I'm working with pixels which vary between browsers so it won't necessarily line up correctly.
Is there a good way of achieving this? Am I stuck with including the header info inside of <caption> (and styling to look like a table row) or creating a regular table row and not using <caption>?
Move background color from div to table and it should remove the color from the top for you. see attached fiddle here
table {
border: solid 1px Black;
width: 100%;
background-color: #FFFFDD;
}
I would remove the caption, use the column head and separate the two items with there own class then align them in your css. Updated the example here This way you don't have the spacing issue at all.
I think I found a cross-browser solution. The key is to set line-height: 0 (plain 0 doesn't work in IE6, but I don't need to support it). Firefox also wouldn't let me reposition the caption directly, so I had to add another span. I still don't like dealing with pixels directly, so any suggestions on that end would be great.
Fiddle: http://jsfiddle.net/vueLL5ce/8/
HTML:
<div>
<table>
<caption><span>Caption</span></caption>
<thead>
<tr class="captionRow">
<th colspan="2">Sample header</th>
</tr>
<tr>
<th>Column1</th>
<th>Column2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data1</td>
<td>Data2</td>
</tr>
</tbody>
</table>
</div>
CSS:
div {
background-color: #FFFFDD;
}
table {
border: solid 1px Black;
width: 100%;
}
table caption {
line-height: 0;
text-align: left;
}
table caption span {
position: relative;
left: 4px;
top: 14px;
}
table th {
background-color: #CCC;
}
.captionRow th {
text-align: right;
}
I have been tasked with switching out the TD elements for TH's on all the headers without any change in appearance. Currently the only styling on the TD is:
td.detailColHeader {
background-color:#d5d5d5;
color:#000;
font-weight:bold;
}
When I apply that to the th, it doesn't look the same. Anyone know what needs to be added to make the TH look like the TD?
The TH and TD elements are used for table cells. TH is used for table
header cells while TD is used for table data cells. This distinction
gives user agents a means to render such cells distinctly, for
instance by using a larger or heavier font for header cells. It is
also needed when rendering to speech. The CLASS attribute can be used
to further differentiate cells, for instance into heads and subheads.
This can be used together with style sheets to control the cell border
style, and fill color etc.
Practically the only change you have to do is:
td {
font-weight: bold;
}
td {
font-weight: bold;
}
<table>
<tr>
<th>th</th>
</tr>
<tr>
<td>td</td>
</tr>
</table>
After #Alohci you can also add:
th {
text-align: left;
}
when table has fixed width.
td {
font-weight: bold;
}
table{
width: 200px;
}
th{
text-align: left;
}
<table>
<tr>
<th>th</th>
</tr>
<tr>
<td>td</td>
</tr>
</table>
This is probably a very basic question but I cant figure it out with standard approach. I have a table in which I am trying to do a different styling for one column. I thought that the easiest way to do this would use a class="class" property inside this column and then apply styling on it but it doesnt work.
This is exmaple of my table (its filled with JSON objects but its not important now):
<table id="logtable" class="pretty">
<thead>
<tr>
<th>Time</th>
<th>From</th>
<th>To</th>
<th>Payload</th>
</tr>
</thead>
<tbody>
<c:forEach var="message" items="${messages}">
<tr>
<td><c:out value="${message.timestamp}" /></td>
<td><c:out value="${message.sender}" /></td>
<td><c:out value="${message.receiver}" /></td>
<td class="message"><c:out value="${message.payload}" /></td>
</tr>
</c:forEach>
</tbody>
</table>
This is the CSS I use (part of it):
table.pretty tbody td {
text-align: center;
background: #DEE7EF;
}
This works but when I try to style the last column like this, it doesnt do anything:
table.pretty tbody td .message {
text-align: left;
}
What am I doing wrong? Thanks for any tips!
You just need:
table.pretty tbody .message {
text-align: left;
}
(skip the td).
This is because .message means basically "any element with the class message".
On the other hand, td .message means "any element with the class message inside any td element.
You have space betweeb td and message,
replace
table.pretty tbody td .message {
with
table.pretty tbody td.message {
td .message this css selector means you are selecting .message which parent is td.
while td.message means td having message class.
Have you tried the following?
table.pretty tbody td.message {
text-align: left;
}
I believe the td .message is trying to find a child to the td-element with a class of "message".
Example: http://jsfiddle.net/Sb2w4/