I have problem with my table JqMobile style is not working when I uploaded to the server I want datat be horizontal not broken.
http://jsfiddle.net/Tbu9U/
html
<table data-role="table" id="productOrders" data-mode="reflow" class="ui-table ui-table-reflow">
<thead>
<tr>
<th>Code</th>
<th>Name</th>
<th>Price</th>
<th>Qty.</th>
<th>Ext.</th>
</tr>
</thead>
<tbody>
<tr>
<td><b class="ui-table-cell-label">Code</b></td>
<td><b class="ui-table-cell-label">Name</b></td>
<td><b class="ui-table-cell-label">Price</b></td>
<td><b class="ui-table-cell-label">Qty.</b></td>
<td><b class="ui-table-cell-label">Ext.</b></td>
</tr>
<tr>
<td>uj7uu</td>
<td>games</td>
<td class="dollars">$70</td>
<td>3</td>
<td>$210</td>
</tr>
</tbody>
</table>
Here is your fiddle updated: http://jsfiddle.net/ezanker/Tbu9U/1/
The only change was on the table markup, remove the class ui-table-reflow and instead add ui-responsive:
<table data-role="table" id="productOrders" data-mode="reflow" class="ui-table ui-responsive">
Related
How would I go about setting up an html table to use sticky headers and set the stickyHeaderOffsetY option.
The examples for
https://bootstrap-table.com/docs/extensions/sticky-header/ all assume you're using javascript to populate the tables and I cannot find any documentation on how to set the options any other way.
This is as far as I have gotten:
<table
data-toggle="table"
data-search="true"
data-sticky-header="true"
data-sortable="true"
data-show-columns="true"
class="table table-striped table-hover table-condensed">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
</tbody>
</table>
Sorry I cant comment, but do you try this?
<table
data-sticky-header="true"
data-sticky-header-offset-y="60"
></table>
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'm trying to make a single row with one single column occupy entire space of a row, and no a single column space:
<table>
<thead>
<tr>
<th>C1</th>
<th>C2</th>
<th>C3</th>
<th>C4</th>
</tr>
</thead>
<tbody>
<tr>
<td>L1</td>
<td>L2</td>
<td>L3</td>
<td>L4</td>
</tr>
<tr>
<td>ONE LINE</td> #THIS ONE I WANT TO OCCUPY SPACE OF 4 TDs
</tr>
</tbody>
</table>
I already tried it:
<td style="width:100%">ONE LINE</td>
and
<tr style="width:100%">
<td>ONE LINE</td>
</tr>
You can use the colspan attribute
<table>
<thead>
<tr>
<th>C1</th>
<th>C2</th>
<th>C3</th>
<th>C4</th>
</tr>
</thead>
<tbody>
<tr>
<td>L1</td>
<td>L2</td>
<td>L3</td>
<td>L4</td>
</tr>
<tr>
<td colspan="4">ONE LINE</td>
</tr>
</tbody>
</table>
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 have following table in my site but for some reason the style width:100px does not work for td. Probably some other css is preceding. I have also tried !important but it still doesn't work.
What can I do to get the width to precede all else?
<table>
<tbody>
<tr>
<th>Resurs</th>
<th>Service</th>
<th>Datum</th>
<th>Tid från</th>
<th>Tid till</th>
<th></th>
</tr>
<tr>
<td style="text-align:left">Resource</td>
<td style="width:100px;word-break:break-all">kjslkjfsdjfj sfjlsjfklsljf slfj lsjfs flsj fkljskf lksj fsjf sdlfj lsjföslajfölsjföl afö aölfjas fasöfj </td>
<td>2015-02-22</td>
<td>10.00</td>
<td>11.00</td>
<td>sdfdsf</td>
</tr>
</tbody>
</table>
Does anyone know how I can get the width to work?
Check this jsfiddle
<table>
<tbody>
<tr>
<th>Resurs</th>
<th>Service</th>
<th>Datum</th>
<th>Tid från</th>
<th>Tid till</th>
<th></th>
</tr>
<tr>
<td style="text-align:left">Resource</td>
<td style="width:330px;word-break:break-all">kjslkjfsdjfj sfjlsjfklsljf slfj lsjfs flsj fkljskf lksj fsjf sdlfj lsjföslajfölsjföl afö aölfjas fasöfj </td>
<td>2015-02-22</td>
<td>10.00</td>
<td>11.00</td>
<td>sdfdsf</td>
</tr>
</tbody>
</table>
http://jsfiddle.net/vjka7b5j/
its working properly ,