I'm new to this website I need your help.
I recently bought real space Wordpress theme.
When I try to add table in Wordpress pages, the table border is not visible. I already add border value 1.
I try few plugin also, still no use.
Please check below style.css, I don't know how to fix it. Please help me check this .css file.
Download .css file : https://www.dropbox.com/s/fu0kz8h93zwmpgv/Table.css?dl=0
Sorry for the delay.
In your wordpress theme bootstrap is there, so need to change anything.
Just you have to add class - "table table-bordered"
whenever you make table add given class
See given below snippet code for more clarification
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<table class="table table-bordered" >
<tbody>
<tr>
<td>Testing</td>
<td>Testing</td>
<td>Testing</td>
<td>Testing</td>
</tr>
<tr>
<td>Testing</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Testing</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Testing</td>
<td>Testing</td>
<td>Testing</td>
<td>Testing</td>
</tr>
<tr>
<td>Testing</td>
<td></td>
<td></td>
<td>Testing</td>
</tr>
<tr>
<td>Testing</td>
<td></td>
<td>Testing</td>
<td>Testing</td>
</tr>
</tbody>
</table>
Related
I have a simple table styled with bootstrap I am trying to display in the Popup of a chrome extension. The on-hover styling that should be applied to each row stops working towards the bottom of the list.
I can load up the popup.html in its own window (via chrome-extension://<my_extension_id>/popup.html and the styling renders just fine.
Here's a pared down version of what my popup.html looks like:
<html>
<head></head>
<body style="width: 200px;">
<link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<table class="table table-sm table-hover">
<tbody>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test (hover styling breaks here)</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
</tbody>
</table>
</body>
I would expect there to be no difference between what chrome's popup window renders and what renders when viewing the popup in its own page. I have experienced similar other anomalies trying to build the styling for my popup. I'm hoping that if I can find an answer to this question, I can apply it to the other issues I've seen.
EDIT: here are some .gifs demonstrating the difference in behavior:
In Popup
In Page
I should also note that I can use chrome DevTools to manually set the :hover property, the table row's styling updates correctly.
I am using a simple bootstrap table with almost 11 table cells (td), after the first table row (tr) I want to show a message when someone clicks on the first table row.
so to show that message I need one long table cell with the full width of the table... but unable to create the td.
Here is my simple table body
<table>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Show full width message here</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="6">Show full width message here</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
When you say that a <td> is of "full width", it should be mentioned in terms of columns which the <td> is going to be stretched over.
In HTML this term is denoted by the attribute colspan. Its value is arbitrary integer without any unit.
And as obvious, when you want a "full width" <td> this value will vary based on the total number of columns in that <table>.
So in your case based on the number of columns you should assign a value of 6 to the colspan attribute of that td. As shown below.
.....
<tr>
<td colspan="6">Show full width message here</td>
</tr>
.....
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 ,
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">
I know how to use CSS and I'm learning Java, so if an answer happens to contain either language, i can compensate. But, i can always hope for a one-liner. :)
If it helps, all src atributes will be very similar for the images.
This is a small sample of a project i'm working on. I'm looking for a way to efficiently show an image beside above, or beside each card's name.
Any help is greatly appreciated
<table class="sentenceCase" id="mainTable"><tr class="notSentenceCase" id="title"><td colspan="10">Name censored Cube</td></tr>
<tr class="notSentenceCase">
<td class="description">bla bla bla irrelevant information</td>
</tr>
<tr class="rarityRow">
<td class="empty" ></td>
<td class="rarity-common" colspan="3">common</td>
<td class="rarity-uncommon" colspan="3">uncommon</td>
<td class="rarity-rare" colspan="3">rare</td>
<tr> <!--White starts here-->
<td class="colorName" rowspan="4">white</td>
<td>porcelain legionnaire</td> <td><img
src="http://www.wizards.com/global/images/magic/ZEN/cliff_threader.jpg"
alt="Cliff Threader"
border="0"
height="200px"
>
cliff threader </td> <td class="lastInRow">marsh threader</td>
<!--To expand, copy this row ^^ *Also do this in the next three blocks VV-->
<td>suppression field</td> <td>bathe in light</td> <td class="lastInRow">cloudgoat ranger</td>
<td>gideon jura</td> <td>eight-and-a-half tails</td> <td>tivadar of thorn</td>
</tr>
<tr>
<td>purelace</td> <td>trade caravan</td> <td class="lastInRow">auramancer</td>
<td>auriok bladewarden</td> <td>ivory giant</td> <td class="lastInRow">crip swap</td>
<td>parallax wave</td> <td></td> <td></td>
</tr>
<tr>
<td>otherworldly journey</td> <td>bonds of faith</td> <td class="lastInRow">avian changeling</td>
<td></td> <td></td> <td class="lastInRow"></td>
<td></td> <td></td> <td></td>
</tr>
<tr>
<td></td> <td></td> <td class="lastInRow"></td>
<td></td> <td></td> <td class="lastInRow"></td>
<td></td> <td></td> <td></td>
</tr> <!--White ends here-->
Did you try with :before and :after pseudo-elements?
td.card:after {
content: url(image_url);
}
These pseudo-elements should come very handy in your case. You don't need to put an image beside every card. You simply add card class to whichever tds you want and style them with the proper CSS.
Here's a nice article about it