I have a table which is looping dynamically. Now I need to hide all <tr> with the class .dynamic-tr except 1st table's <tr class="dynamic-tr"> by using CSS.
<table class="dynamic-table">
<tr class="dynamic-tr">
<th>Resource Name</th>
<th>Allocation</th>
</tr>
<tr>
<td>John</td>
<td>100%</td>
</tr>
</table>
<table class="dynamic-table">
<tr class="dynamic-tr">
<th>Resource Name</th>
<th>Allocation</th>
</tr>
<tr>
<td>Alex</td>
<td>50%</td>
</tr>
</table>
<table class="dynamic-table">
<tr class="dynamic-tr">
<th>Resource Name</th>
<th>Allocation</th>
</tr>
<tr>
<td>Bryce</td>
<td>100%</td>
</tr>
</table>
I have tried with this CSS but its not working. Can somebody please suggest.
.dynamic-table .dynamic-tr {
display: none;
}
.dynamic-table:first-of-type .dynamic-tr {
display: block;
}
Use :not to achieve what you need.
table.dynamic-table:not(:first-child) .dynamic-tr {
display:none;
}
<table class="dynamic-table">
<tr class="dynamic-tr">
<th>Resource Name</th>
<th>Allocation</th>
</tr>
<tr>
<td>John</td>
<td>100%</td>
</tr>
</table>
<table class="dynamic-table">
<tr class="dynamic-tr">
<th>Resource Name</th>
<th>Allocation</th>
</tr>
<tr>
<td>Alex</td>
<td>50%</td>
</tr>
</table>
<table class="dynamic-table">
<tr class="dynamic-tr">
<th>Resource Name</th>
<th>Allocation</th>
</tr>
<tr>
<td>Bryce</td>
<td>100%</td>
</tr>
</table>
Does this satisfy your requirements ?
body > table > tbody > tr.dynamic-tr { display: none; }
body > table:first-of-type > tbody > tr.dynamic-tr {display: inline;}
Related
I have a table that has six columns, five of which can be hidden based on user selection(s). The issue that I'm having is that when a column is hidden all other columns expand to fill the space that the hidden column occupied. What I would like to occur instead is for the column to just hide and the remaining columns shift to the left while retaining the widths that they were given. None of the answers that I have found on here seem to address this particular issue.
Below is snips of both my js and css along with screen grabs.
js:
<table className="hours table table-bordered table-sm" table-layout="fixed">
<thead>
<tr>
<th scope="col"
colSpan="3"
className="row-dow"
>
Hours
</th>
<th
scope="col"
colSpan="2"
align="center"
hidden={this.state.kitchenHoursSame}
className="row-16"
>
Kitchen Hours
</th>
<th
scope="col"
colSpan="2"
align="center"
hidden={!this.state.breakfast}
className="row-16"
>
Breakfast Special
</th>
...
</tr>
<tr>
<th
scope="col"
// className="row-8 "
>
Day
</th>
<th
scope="col"
className="row-8"
>
Open
</th>
<th
scope="col"
className="row-8"
>
Close
</th>
<th
scope="col"
hidden={this.state.kitchenHoursSame}
className="row-8"
>
Open
</th>
<th
scope="col"
hidden={this.state.kitchenHoursSame}
className="row-8"
>
Close
</th>
<th
scope="col"
hidden={!this.state.breakfast}
className="row-8"
>
1234567890123
</th>
<th
scope="col"
hidden={!this.state.breakfast}
className="row-8"
>
End
</th>
...
</tr>
</thead>
<tbody>
{this.state.DOW.map((dowList, i) =>
<tr>
<th scope="row" key={dowList.i}>{dowList.long}</th>
<td>
<select name="timeofday"
value={this.state.timeofday}
onChange={this.handleInputChange}>
<option>
(open)
</option>
</select>
</td>
...
</tr>
)}
</tbody>
</table>
css:
.hours {
table-layout: fixed;
/* width: 90%; */
width: 1500px;
white-space: nowrap;
}
.hours td {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.row-dow {
width: 20px;
}
.row-16 {
width: 16px;
}
.row-8 {
width: 8px;
}
Any help would be appreciated even if it is being told that I shouldn't be using tables and should be using something else.
The snippet below shows you how different width defined tables behave when a column is going to be deleted.
window.addEventListener("load", () => {
const firstTDs = Array.from(
document.querySelectorAll("td:nth-child(3)")
).concat(Array.from(document.querySelectorAll("th:nth-child(3)")));
document.querySelector(".remove").addEventListener(
"click",
() => {
firstTDs.forEach(td => {
td.parentNode.removeChild(td);
});
},
{ once: true }
);
});
.full-width {
width: 100%;
}
.fixed-width {
width: 600px;
}
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<h5>Auto width</h5>
<table class="tbl mdl-data-table mdl-shadow--2dp">
<thead>
<tr>
<th class="mdl-data-table__cell--non-numeric">Material</th>
<th>Unit price</th>
<th>Quantity</th>
<th>Unit price</th>
</tr>
</thead>
<tbody>
<tr>
<td class="mdl-data-table__cell--non-numeric">Acrylic (Transparent)</td>
<td>$2.90</td>
<td>25</td>
<td>$2.90</td>
</tr>
<tr>
<td class="mdl-data-table__cell--non-numeric">Plywood (Birch)</td>
<td>$1.25</td>
<td>50</td>
<td>$1.25</td>
</tr>
<tr>
<td class="mdl-data-table__cell--non-numeric">Laminate (Gold on Blue)</td>
<td>$2.35</td>
<td>10</td>
<td>$2.35</td>
</tr>
</tbody>
</table>
<h5>Full width</h5>
<table class="full-width mdl-data-table mdl-shadow--2dp">
<thead>
<tr>
<th class="mdl-data-table__cell--non-numeric">Material</th>
<th>Unit price</th>
<th>Quantity</th>
<th>Unit price</th>
</tr>
</thead>
<tbody>
<tr>
<td class="mdl-data-table__cell--non-numeric">Acrylic (Transparent)</td>
<td>$2.90</td>
<td>25</td>
<td>$2.90</td>
</tr>
<tr>
<td class="mdl-data-table__cell--non-numeric">Plywood (Birch)</td>
<td>$1.25</td>
<td>50</td>
<td>$1.25</td>
</tr>
<tr>
<td class="mdl-data-table__cell--non-numeric">Laminate (Gold on Blue)</td>
<td>$2.35</td>
<td>10</td>
<td>$2.35</td>
</tr>
</tbody>
</table>
<h5>Fixed width</h5>
<table class="fixed-width mdl-data-table mdl-shadow--2dp">
<thead>
<tr>
<th class="mdl-data-table__cell--non-numeric">Material</th>
<th>Unit price</th>
<th>Quantity</th>
<th>Unit price</th>
</tr>
</thead>
<tbody>
<tr>
<td class="mdl-data-table__cell--non-numeric">Acrylic (Transparent)</td>
<td>$2.90</td>
<td>25</td>
<td>$2.90</td>
</tr>
<tr>
<td class="mdl-data-table__cell--non-numeric">Plywood (Birch)</td>
<td>$1.25</td>
<td>50</td>
<td>$1.25</td>
</tr>
<tr>
<td class="mdl-data-table__cell--non-numeric">Laminate (Gold on Blue)</td>
<td>$2.35</td>
<td>10</td>
<td>$2.35</td>
</tr>
</tbody>
</table>
<h5>Actions</h5>
<button class="remove mdl-button mdl-button--raised">Remove Quantity</button>
If you have no problem rendering table content everytime, this can be handled using css property visibility: hidden; which hides the element with space occupied in the dom. See for : visibilty hidden
Approach :
Instead of using hidden attribute on th or td, i have used class = hideColumn which is defined to hide the element.
Next border: none to remove the border from the element.
In your case, you can also use 'class' attribute to achieve this.
If this is not helpful please let me know in the comments, or if anything can be done to take this near to required solution.
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
font-size: 10px;
}
.hideColumn {
visibility: hidden;
border: none;
}
h2 {
font-size: 12px;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
<h2>Visible All Column Table</h2>
<table>
<tr>
<th >Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr >
<td >Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>
<br>
<h2>Hidden 1st Column Table</h2>
<table>
<tr>
<th class='hideColumn'>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr >
<td class='hideColumn'>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td class='hideColumn'>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>
<br>
<h2>Hidden 2nd Column Table</h2>
<table>
<tr>
<th >Company</th>
<th class='hideColumn'>Contact</th>
<th>Country</th>
</tr>
<tr >
<td >Alfreds Futterkiste</td>
<td class='hideColumn'>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td >Centro comercial Moctezuma</td>
<td class='hideColumn'>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>
Approach 2:
Just make the text transparent.
.otherDiv table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
font-size: 10px;
border: 1px solid #dddddd;
}
.otherDiv .hideColumn {
color: transparent;
}
h2 {
font-size: 12px;
}
.otherDiv td, th {
border-top: 1px solid #dddddd;
border-bottom: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
<div class='otherDiv'>
<h2>Visible All Column Table</h2>
<table>
<tr>
<th >Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr >
<td >Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>
<br>
<h2>Hidden 1st Column Table</h2>
<table>
<tr>
<th class='hideColumn'>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr >
<td class='hideColumn'>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td class='hideColumn'>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>
<br>
<h2>Hidden 2nd Column Table</h2>
<table>
<tr>
<th >Company</th>
<th class='hideColumn'>Contact</th>
<th>Country</th>
</tr>
<tr >
<td >Alfreds Futterkiste</td>
<td class='hideColumn'>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td >Centro comercial Moctezuma</td>
<td class='hideColumn'>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>
</div>
I am using anchor elemnts in an html table and want to add some padding to the top of the viewport. I figured out, that I can place the anchor in a dummy DIV element inside of the TD element to achieve this. However I also want to highlight the targets table row.
How can I achieve this without javascript?
I have tried several solutions from
HTML position:fixed page header and in-page anchors,
but they all do not work well in html tables.
Here is some minimal working example.
The "D" anchor has correct highlighting, but positioning does not
work.
The "E" anchor has correct positioning, but no highlighting.
tr:target {
color: #ee4444;
position: relative;
top: -40px;
}
div:target {
color: #ee4444;
position: relative;
top: -40px;
}
go to D go to E
<table>
<tr>
<th>Symbol</th>
<th>1932 ITU/ICAN Phonetic</th>
</tr>
<tr>
<td>A</td>
<td>Amsterdam</td>
</tr>
<tr>
<td>B</td>
<td>Baltimore</td>
</tr>
<tr>
<td>C</td>
<td>Casablanca</td>
</tr>
<tr id="D">
<td>D</td>
<td>Denmark</td>
</tr>
<tr>
<td>
<div id="E"></div>E</td>
<td>Edison</td>
</tr>
<tr>
<td>F</td>
<td>Florida</td>
</tr>
<tr>
<td>G</td>
<td>Gallipoli</td>
</tr>
<tr>
<td>H</td>
<td>Havana</td>
</tr>
<tr>
<td>I</td>
<td>Italia</td>
</tr>
<tr>
<td>J</td>
<td>Jerusalem</td>
</tr>
<tr>
<td>K</td>
<td>Kilogramme</td>
</tr>
<tr>
<td>L</td>
<td>Liverpool</td>
</tr>
<tr>
<td>M</td>
<td>Madagascar</td>
</tr>
<tr>
<td>N</td>
<td>New York</td>
</tr>
<tr>
<td>O</td>
<td>Oslo</td>
</tr>
<tr>
<td>P</td>
<td>Paris</td>
</tr>
<tr>
<td>Q</td>
<td>Quebec</td>
</tr>
<tr>
<td>R</td>
<td>Roma</td>
</tr>
<tr>
<td>S</td>
<td>Santiago</td>
</tr>
<tr>
<td>T</td>
<td>Tripoli</td>
</tr>
<tr>
<td>U</td>
<td>Upsala</td>
</tr>
<tr>
<td>V</td>
<td>Valencia</td>
</tr>
<tr>
<td>W</td>
<td>Washington</td>
</tr>
<tr>
<td>X</td>
<td>Xanthippe</td>
</tr>
<tr>
<td>Y</td>
<td>Yokohama</td>
</tr>
<tr>
<td>Z</td>
<td>Zurich</td>
</tr>
</table>
The intended behaviour can be achieved if you consider combining both the initial solutions attempted into one standard, as demonstrated by the code snippet embedded below.
Create separate table-rows for your anchor points, assign your
respective ids to these elements.
Use the adjacent sibling combinator Ref (+) to
declare your pseudo-selector :target styles
Declare your anchor point table-row with absolute positioning and
use margin-top property values to offset the position instead of
the top property (as this will position the element n question
relative to the document or the closest containing/parent element with a relative positioning)
Code Snippet Demonstration:
table {
border-spacing: 0;
}
.anchor-row:target + tr {
color: #ee4444;
}
.anchor-row {
position: absolute;
margin-top: -40px;
}
go to D go to E
<table>
<tr>
<th>Symbol</th>
<th>1932 ITU/ICAN Phonetic</th>
</tr>
<tr>
<td>A</td>
<td>Amsterdam</td>
</tr>
<tr>
<td>B</td>
<td>Baltimore</td>
</tr>
<tr>
<td>C</td>
<td>Casablanca</td>
</tr>
<tr class="anchor-row" id="D">
<td colspan="2"></td>
</tr>
<tr>
<td>D</td>
<td>Denmark</td>
</tr>
<tr class="anchor-row" id="E">
<td colspan="2"></td>
</tr>
<tr>
<td>E</td>
<td>Edison</td>
</tr>
<tr>
<td>F</td>
<td>Florida</td>
</tr>
<tr>
<td>G</td>
<td>Gallipoli</td>
</tr>
<tr>
<td>H</td>
<td>Havana</td>
</tr>
<tr>
<td>I</td>
<td>Italia</td>
</tr>
<tr>
<td>J</td>
<td>Jerusalem</td>
</tr>
<tr>
<td>K</td>
<td>Kilogramme</td>
</tr>
<tr>
<td>L</td>
<td>Liverpool</td>
</tr>
<tr>
<td>M</td>
<td>Madagascar</td>
</tr>
<tr>
<td>N</td>
<td>New York</td>
</tr>
<tr>
<td>O</td>
<td>Oslo</td>
</tr>
<tr>
<td>P</td>
<td>Paris</td>
</tr>
<tr>
<td>Q</td>
<td>Quebec</td>
</tr>
<tr>
<td>R</td>
<td>Roma</td>
</tr>
<tr>
<td>S</td>
<td>Santiago</td>
</tr>
<tr>
<td>T</td>
<td>Tripoli</td>
</tr>
<tr>
<td>U</td>
<td>Upsala</td>
</tr>
<tr>
<td>V</td>
<td>Valencia</td>
</tr>
<tr>
<td>W</td>
<td>Washington</td>
</tr>
<tr>
<td>X</td>
<td>Xanthippe</td>
</tr>
<tr>
<td>Y</td>
<td>Yokohama</td>
</tr>
<tr>
<td>Z</td>
<td>Zurich</td>
</tr>
</table>
You can try below this.
tr:target {
color: #ee4444;
position:relative;
top:0px;
}
span:target {
color: #ee4444;
position:relative;
top:0px;
}
<tr id="D"><td>D</td><td>Denmark</td></tr>
<tr><td><span id="E">hello</span>E</td><td>Edison</td></tr>
I have a table with some <td>s, and a couple of them have rowspan attribute. I'm trying to select the very last one in the table, neither last-child nor last-of-type works.
Here is a jsfiddle: https://jsfiddle.net/p2cjwvj5/
<table class='myTable' border='1'>
<tr>
<td rowspan='3'>HEADER</td>
</tr>
<tr>
<td>something</td>
</tr>
<tr>
<td>something</td>
</tr>
<tr>
<td rowspan='3'>HEADER2</td>
</tr>
<tr>
<td>something2</td>
</tr>
<tr>
<td>something2</td>
</tr>
</table>
.myTable [rowspan]:last-of-type {
color: red;
}
I'm trying to to select the cell that contains "HEADER2".
Is this possible? I know I can work around it by tagging the last rowspan with another class, just wonder if there is a cleaner method. Thanks!
You can wrap each group of <tr>s into a <tbody>, then select the last tbody by either using :last-of-type or :last-child would be fine.
.myTable tbody:last-of-type td[rowspan] {
color: red;
}
<table class='myTable' border='1'>
<tbody>
<tr>
<td rowspan='3'>HEADER</td>
</tr>
<tr>
<td>something</td>
</tr>
<tr>
<td>something</td>
</tr>
</tbody>
<tbody>
<tr>
<td rowspan='3'>HEADER2</td>
</tr>
<tr>
<td>something2</td>
</tr>
<tr>
<td>something2</td>
</tr>
</tbody>
</table>
If you don't want to add more <tbody>s, you could always just put a class on the last rowspan-ed table cell, like:
.myTable .lastRowspannedCell {
color: red;
}
<table class='myTable' border='1'>
<tr>
<td rowspan='3'>HEADER</td>
</tr>
<tr>
<td>something</td>
</tr>
<tr>
<td>something</td>
</tr>
<tr>
<td rowspan='3' class='lastRowspannedCell'>HEADER2</td>
</tr>
<tr>
<td>something2</td>
</tr>
<tr>
<td>something2</td>
</tr>
</table>
I don't know the structure of your back-end code, so that's assuming you can know up-front if a group is the last group.
As a bonus, not using the :last-of-type/:last-child selector nets you better IE8 compatibility, if you care about that.
I need to target the first <td> element in a table row that is visible--meaning it does not have inline styling of display:none.
Here's the gotchyas:
They are not always hidden
Sometimes more than one is hidden.
I can't edit the HTML or use javascript/jQuery--This needs to be a pure CSS solution (hopefully)
Here is a quick sample of what the code looks like:
<table>
<thead>
<tr>
<th style="display:none">Header1</th>
<th>Header2</th>
<th>Header3</th>
<th>Header4</th>
</tr>
</thead>
<tbody>
<tr>
<td style="display:none">Body1</td>
<td>Body2</td>
<td>Body3</td>
<td>Body4</td>
</tr>
</tbody>
</table>
I tried messing with something like this to no avail:
table > tbody > tr > td:first-of-type:not([style*="display:none"])
Here's a fiddle to mess with
Thanks in advance.
If your hidden elements are always at the beginning of the row, you can use the direct sibling selector for this +.
td:first-child,
td[style*="none"] + td {
color: red;
}
<table>
<thead>
<tr>
<th style="display:none">Header1</th>
<th>Header2</th>
<th>Header3</th>
<th>Header4</th>
</tr>
</thead>
<tbody>
<tr>
<td style="display:none">Body1</td>
<td>Body2</td>
<td>Body3</td>
<td>Body4</td>
</tr>
<tr>
<td>First</td>
<td>Second</td>
<td>Third</td>
</tr>
<tr>
<td style="display:none">and</td>
<td>here's</td>
<td>an</td>
<td style="display:none">edge</td>
<td>case</td>
</tr>
</tbody>
</table>
This will style anything that isn't "display:none", but undo that when it gets to a subsequent "display:none".
table > tbody > tr > td:not([style*="display:none"]) {
color: red;
}
table > tbody > tr > td:not([style*="display:none"]) ~ td:not([style*="display:none"]) {
color: inherit;
}
<table>
<thead>
<tr>
<th style="display:none">Header1</th>
<th>Header2</th>
<th>Header3</th>
<th>Header4</th>
</tr>
</thead>
<tbody>
<tr>
<td style="display:none">Body1</td>
<td>Body2</td>
<td>Body3</td>
<td>Body4</td>
</tr>
<tr>
<td>First</td>
<td>Second</td>
<td>Third</td>
</tr>
</tbody>
</table>
I'm creating a table on to display on a JSP page in Struts2. I want to the be able to scroll the table but keep the column headings fixed at the top. So far all I can achieve is when I scroll the table the headings also scroll.
Here is my table code.
<div style="height: 150px; overflow: auto;">
<p id="contact"></p>
<table class="table table-stripec" id="contact" border="data-height=100" align = "center" >
<thead>
<tr>
<th>Ticket Id</th>
<th>Creation Date</th>
<th>Client Name</th>
<th>Department.</th>
<th>Summary.</th>
<th>Assigned to.</th>
<th>status.</th>
<th>Update.</th>
<th>Category.</th>
</tr>
<p></p>
<s:iterator value="ticketList">
<tr>
<td><s:property value="ticket_id" /></td>
<td><s:property value="date1" /></td>
<td><s:property value="name" /></td>
<td><s:property value="department" /></td>
<td><s:property value="issueType" /></td>
<td><s:property value="assigneName" /></td>
<td><s:property value="status" /></td>
<td><s:property value="statusupdate" /></td>
<td><s:property value="category" /></td>
</tr>
</s:iterator>
</thead>
</table>
</div>
any help would be appreciated.
Because you are writing rows to the head of the table instead of the body. Try
<table class="table table-stripec" id="contact" border="data-height=100" align = "center" >
<thead>
<tr>
<th>Ticket Id</th>
<th>Creation Date</th>
<th>Client Name</th>
<th>Department.</th>
<th>Summary.</th>
<th>Assigned to.</th>
<th>status.</th>
<th>Update.</th>
<th>Category.</th>
</tr>
</thead>
<tbody>
<s:iterator value="ticketList">
<tr>
<td><s:property value="ticket_id" /></td>
<td><s:property value="date1" /></td>
<td><s:property value="name" /></td>
<td><s:property value="department" /></td>
<td><s:property value="issueType" /></td>
<td><s:property value="assigneName" /></td>
<td><s:property value="status" /></td>
<td><s:property value="statusupdate" /></td>
<td><s:property value="category" /></td>
</tr>
</s:iterator>
</tbody>
</table>
If you are using Bootstrap, please tag the question as Bootstrap;
If you are using Bootstrap, be aware of the existence of the struts2-bootstrap-plugin;
table-stripec should be table-striped;
In an HTML <table>, <thead> must contain only the headers, the rest goes into <tbody>;
<p></p> (as every other HTML tag) is illegal between one <tr> and another;
Use the proper Bootstrap classes on your table objects.
That said, there are numerous solutions to this problem, both with plugins / external libraries, or with custom code, like this one.
The following is pretty straight, and the CSS code is minimal, but it changes the table behavior a bit, so take a look if it can fit your needs:
.table-fixed thead {
width: 97%;
}
.table-fixed tbody {
height: 140px;
overflow-y: auto;
width: 100%;
}
.table-fixed thead, .table-fixed tbody, .table-fixed tr, .table-fixed td, .table-fixed th {
display: block;
}
.table-fixed tbody td, .table-fixed thead > tr> th {
float: left !important; /* !important added only to fix
StackOverflow's Snippet behavior.
Not needed otherwise. */
border-bottom-width: 0;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table table-fixed">
<thead>
<tr>
<th class="col-xs-3">Ticket Id</th>
<th class="col-xs-6">Creation Date</th>
<th class="col-xs-3">Client Name</th>
</tr>
</thead>
<tbody>
<tr>
<td class="col-xs-3">1</td>
<td class="col-xs-6">1 gen 2015</td>
<td class="col-xs-3">Foo</td>
</tr>
<tr>
<td class="col-xs-3">2</td>
<td class="col-xs-6">2 gen 2015</td>
<td class="col-xs-3">Bar</td>
</tr>
<tr>
<td class="col-xs-3">3</td>
<td class="col-xs-6">3 gen 2015</td>
<td class="col-xs-3">FooBar</td>
</tr>
<tr>
<td class="col-xs-3">4</td>
<td class="col-xs-6">4 gen 2015</td>
<td class="col-xs-3">BarFoo</td>
</tr>
<tr>
<td class="col-xs-3">5</td>
<td class="col-xs-6">5 gen 2015</td>
<td class="col-xs-3">Foo</td>
</tr>
<tr>
<td class="col-xs-3">6</td>
<td class="col-xs-6">6 gen 2015</td>
<td class="col-xs-3">Bar</td>
</tr>
<tr>
<td class="col-xs-3">7</td>
<td class="col-xs-6">7 gen 2015</td>
<td class="col-xs-3">FooBar</td>
</tr>
<tr>
<td class="col-xs-3">8</td>
<td class="col-xs-6">8 gen 2015</td>
<td class="col-xs-3">BarFoo</td>
</tr>
<tr>
<td class="col-xs-3">9</td>
<td class="col-xs-6">9 gen 2015</td>
<td class="col-xs-3">Foo</td>
</tr>
<tr>
<td class="col-xs-3">10</td>
<td class="col-xs-6">10 gen 2015</td>
<td class="col-xs-3">Bar</td>
</tr>
<tr>
<td class="col-xs-3">11</td>
<td class="col-xs-6">11 gen 2015</td>
<td class="col-xs-3">FooBar</td>
</tr>
<tr>
<td class="col-xs-3">12</td>
<td class="col-xs-6">12 gen 2015</td>
<td class="col-xs-3">BarFoo</td>
</tr>
</tbody>
</table>
Note: table-striped class won't natively work with this one; just add your odd/even classes to the <tr> inside the <s:iterator> by yourself