I have this
header1 header2
data1 data2
But I want to display it as
h h
e e
a a
d d
e e
r r
1 2
data1 data2
I also want borders around the headers and table rows.
EDIT:
Based on Vinc199789's answer below I came up with this.
<table>
<tr style="border 1px solid;text-align:center;">
<th style="width:1px;word-break:break-all;border:1px solid;text-align:center;"><div style="width:1px;word-break:break-all;text-align:center;">Jill</div></th>
<th style="width:1px;word-break:break-all;border: 1px solid;"><div style="width:1px;word-break:break-all;">Smith</div></th>
<th style="width:1px;word-break:break-all;border: 1px solid;"><div style="width:1px;word-break:break-all;">50</div></th>
</tr>
<tr>
<td style="border: 1px solid;">Eve</td>
<td style="border: 1px solid;">Jackson</td>
<td style="border: 1px solid;">94</td>
</tr>
</table>
However I need the following improvements on this:
If you see the output, there is a gap above J in "Jill" , "Smith" occupies the entire vertical space and "50" is in the middle. Is there a way to make all the headers start from the ceiling of the vertical space?
I also wanted a way to center align "Jill", "Smith" and "50". text-align:center is not working.
You can use css word-break: break-all
What I did is I added a div inside a td and set the width to 1px (this to make sure that there can not be two letters placed next to each other). I also added word-break: break-all and you can see the result in the code snippet or is this fiddle.
edit
With margin-left:auto and margin-right:auto I center the vertical headers and with text-align:center I center the other table content.
If you add vertical-align:top to the td you also have your headers placed at the top
updated fiddle
td > div{
width:1px;
word-break: break-all;
margin-right:auto;
margin-left:auto;
}
td{
text-align:center;
vertical-align:top;
}
<table style="width:100%">
<tr>
<td><div>Jill</div></td>
<td><div>Smith</div></td>
<td><div>50</div></td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
Related
I'd like to create a table with content from my database. I have a table without a header for multiple reasons (e.q. scrolling). Is it possible set the colums to the same width as the table before without JS? I dont want to add a class to each td element if possible. Not all columns have the same width. Nth-child is a bad solution because I have multiple tables.. :/
Here is a shorter version of my table:
table, th, td {
border: 1px solid #000;
}
table {
border-collapse: collapse;
}
.h1 {
width: 125px;
}
.h2 {
width: 150px;
}
<table>
<tr>
<th class="h1">
<span>a</span>
</th>
<th class="h2">
<span>b</span>
</th>
</tr>
</table>
<table>
<tr>
<td>
<span>c</span>
</td>
<td>
<span>d</span>
</td>
</tr>
</table>
one of the tables has header and one of them doesn't. and in your css you do not specify the table without header... you should has a code like this
table , tr, td{}
Build the table with
for mobile layout, need to change layout like below. Not sure whether collapsible by Rows or columns.
Can bring this layout via CSS? In case, we need to add margin top & bottom for "B" row is it possible to update via CSS?
Can please provide your valuable comments?
Thanks
th, td{
width: 100px;
text-align: center;
border: 1px solid red;
}
<table>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
</tr>
<tr>
<td>1.1</td>
<td>1.2</td>
<td>1.3</td>
</tr>
<tr>
<td>2.1</td>
<td>2.2</td>
<td>2.3</td>
</tr>
</table>
I have a table with multiple lines, e.g.:
<table>
<tr id="line1"><td>Line</td><td>1</td></tr>
<tr id="line2"><td>Line</td><td>2</td></tr>
<tr id="line3"><td>Line</td><td>3</td></tr>
</table>
Now, in javascript (based on a radio input field) I want to remove (e.g.) #line3 by adding a visibility:collapse, something like:
document.getElementById("line3").style = "visibility:collapse";
The special thing about #line3 is that it has a border-top:
<style>
table {
border-collapse: collapse;
}
#line3 {
border-top:1px solid black;
}
</style>
The problem I have with that: When I "collapse" #line3 the border persists, eventhough the element "does not exist". I guess this should be due to the border-collapse in the table style "inheriting" a border element on the previous tr element? How can I fix that issue?
EDIT: I'd like to keep the javascript like that. Of course I could remove/readd the style element but there should be a different way to solve this?!
Of course I could remove/readd the style element
I think this means you don't want to mess with the border-top property when changing the row's visibility, correct?
In that case, it looks like your only option is to use display:none instead of visibility:collapse[1], which is unfortunate because then your table might have the wobbly effect that visibility:collapse was designed to prevent.
[1] https://drafts.csswg.org/css-tables-3/#visibility-collapse-track-rendering is not crystal clear, but looks like the spec prescribes the behavior you don't want. And chrome and firefox act a bit differently in the visibility:collapse case. https://jsfiddle.net/dgrogan/gLqo9s4w/2
let visible = 1;
toggle.onclick = function() {
line3.style.visibility = visible ? "collapse" : "visible";
//line3.style.display = visible ? "none" : "table-row";
visible = !visible;
}
table {
border-collapse: collapse;
}
td {
border: 1px solid lime;
}
#line3 {
border-top: 2px solid black;
}
<table>
<tr id="line1">
<td>Line</td>
<td>1</td>
</tr>
<tr id="line2">
<td>Line</td>
<td>2</td>
</tr>
<tr id="line3">
<td>Line</td>
<td>3</td>
</tr>
</table>
<br><br>
<button id=toggle>toggle</button>
<P>
https://drafts.csswg.org/css-tables-3/#visibility-collapse-track-rendering
</P>
Have you tried "display: none"?
document.getElementById("line3").style = "display: none";
Or maybe you could try setting the border-top to 0 which should hide it.
document.getElementById("line3").style = "visibility:collapse; border-top: 0";
.cssText
You can edit the whole inline [style] attribute by using .cssText:
document.getElementById("line3").style.cssText = "visibility:collapse; border-top:0px";
This allows you to set visibility and border properties (and more if you want) in one line.
Demo
document.getElementById("line3").style.cssText = "visibility:collapse; border-top:0px";
table {
border-collapse: collapse;
}
#line3 {
border-top: 1px solid black;
}
<table>
<tr id="line1">
<td>Line</td>
<td>1</td>
</tr>
<tr id="line2">
<td>Line</td>
<td>2</td>
</tr>
<tr id="line3">
<td>Line</td>
<td>3</td>
</tr>
</table>
You have several solutions to do this, with Jquery:
$('#line1').hide();
//OR
$('#line1').css('visibility','collapse');
//OR
$('#line1').css('display','none');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr id="line1"><td>Line</td><td>1</td></tr>
<tr id="line2"><td>Line</td><td>2</td></tr>
<tr id="line3"><td>Line</td><td>3</td></tr>
</table>
You can also use Javascript directly with the getElementById property:
document.getElementById("line1").style.display = "none";
Or
document.getElementById("line1").style.visibility = "collapse";
I have an AngularJS module with a page that shows a table of topics and subtopics. Each topic is a tbody element with 2 rows: one representing the topic name, and one containing a nested table where the rows are the subtopics. Each topic has an expand / collapse button that controls the subtopics, i.e. ng-shows / hides the row where the subtopics table is:
<table>
<tbody ng-repeat="topic in topics">
<tr>
<td>{{topic.name}}</td>
<td class="toggle-subtopics" ng-click="toggleSubtopics(topic)">Expand / collapse</td>
</tr>
<tr class="test-height" ng-show="topic.expanded">
<td colspan=2>
<table>
<tr ng-repeat="subtopic in topic.subtopics">
<td>{{subtopic.name}}</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
I'd like the subtopics row to appear / disappear with ng-animation, but the main problem is that no matter what I do, I can't seem to control the height of this row.
Fiddle
In order to control a td height you need to work on the line-height instead of height
Fiddle
Code Snippet:
.test-height {
line-height: 40px !important; /* This doesn't affect the height of the row */
}
Option 1:
Updated Code:
.table > tbody > tr >td {
line-height: 40px !important;
}
Updated Fiddle Option 1
Option 2:
If you do not want to mess with bootstrap global space you can create your own class and assign that to individual td
Updated Code:
.fixed-height {
line-height: 40px !important;
}
Updated Fiddle Option 2
Try This:
.test-height {
height: 3px;
overflow:hidden;
display:block;
}
Good day programmers,
Being an amateur, I hunted around and found someone who created a very nice jQuery drop-down table. I found a terrific one...
$("#report tr:odd").addClass("odd");
$("#report tr:not(.odd)").hide();
$("#report tr:first-child").show();
$("#report tr.odd").click(function(){
$(this).next("tr").toggle();
$(this).find(".arrow").toggleClass("up");
});
And the CSS...
#report { border-collapse:collapse;}
#report h4 { margin:0px; padding:0px;}
#report img { float:left;}
#report ul { margin:10px 0 10px 40px; padding:0px;}
#report th { background:#222222 url(header_bkg.png) repeat-x scroll center left; color:#FFF; padding:3px 8px; text-align:center;}
#report td { background:#111111 none repeat-x scroll top left; color:#000; padding:3px 8px; text-align:center;}
#report tr.odd td { background:#000000 url(row_bkg.png) repeat-x scroll center left; cursor:pointer;}
#report div.arrow { background:transparent url(arrows.png) no-repeat scroll 0px -16px; width:16px; height:16px; display:block;}
#report div.up { background-position:0px 0px;}
By itself, it works just fine... you can see the gaming page I use it on at the following link:
http://www.mynextbit.com/Pages/Wreckedified/roster.html
I'm trying to figure out a way to make it to where I could drop down maybe 12 or so rows instead of just one to show a bunch of data about one of those characters in the table. I did some digging and thought I could re-write the jQuery using the
nth-child(12n+0)
But couldn't quite pull it off. Am I on the right track at least or is there a more obvious and simple solution?
Have you considered that it might be possible to simply start a new table within your rows so you can keep the existing functionality?
Right now your HTML looks a bit like this:
<table>
<thead>
<th>Character</th><th>iLevel</th><th>And your other columns...</th>
</thead>
<tbody>
<tr>
<td>CharacterName (Build)</td><td>559</td><td>other column data...</td>
</tr>
<tr>
<td>This is your hidden data row</td>
</tr>
</tbody>
</table>
Instead of trying to alter the script so that it hides/shows the next 12 <tr> tags you could just create a new table inside your hidden data row...
<table>
<thead>
<th>Character</th><th>iLevel</th><th>And your other columns...</th>
</thead>
<tbody>
<tr>
<td>CharacterName (Build)</td><td>559</td><td>other column data...</td>
</tr>
<tr>
<td>
<table>
<tr><td>Hidden data row 1</td></tr>
<tr><td>Hidden data row 2</td></tr>
<tr><td>Hidden data row 3</td></tr>
<tr><td>Hidden data row 4</td></tr>
<tr><td>Hidden data row 5</td></tr>
<tr><td>Hidden data row 6</td></tr>
<tr><td>Hidden data row 7</td></tr>
<tr><td>Hidden data row 8</td></tr>
<tr><td>Hidden data row 9</td></tr>
<tr><td>Hidden data row 10</td></tr>
<tr><td>Hidden data row 11</td></tr>
<tr><td>Hidden data row 12</td></tr>
</table>
</td>
</tr>
</tbody>
</table>
But table are "oldschool" so if you draw a picture of what you want to display we might be able to give you some alternative ways too.