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
Related
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 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've a html where i want a particular cell to be aligned to left. below is the code and fiddle link.
HTML:
<section class="tr_chapter">
<div class="chapter"><a name="HKWBV1_ORD_89"></a>
<div class="toc">
<div class="toc-part">
<table class="toc-div">
<tbody>
<tr>
<td>
<table class="toc-item-third-level">
<tbody>
<tr>
<td></td>
<td class="toc-item-num-left"><span class="font-style-bold">Contents</span></td>
<td class="toc-title"></td>
<td class="toc-pg"><span class="font-style-italic">para.</span></td>
</tr>
<tr>
<td>4/0/1</td> <td class="toc-item-num-left">1.</td>
<td class="toc-title">Companies (O.4, r.2)</td>
<td class="toc-pg">4/2</td>
</tr>
<tr>
<td></td>
<td class="toc-item-num-left">2.</td>
<td class="toc-title">Consolidation, etc., of causes or matters (O.4, r.9)</td>
<td class="toc-pg">4/9</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</section>
I want the output as given in the below image. i.e. the number (4/0/1). please let me know how can i do it.
Fiddle
Thanks
If you want the cell with the number 4/0/1 aligned left simply give align="left" to the parent td or add to it a class with text-align:left;
See: jsfiddle
How can I define some general properties for the columns of a table? For example, in the following table I have 2 columns. I want the left column to have a width of 30px and the right column a width of 70px. For the example below I'm writing a CSS class name in every row. Is there a way that I can do it in a more general way? Thanks.
<table width="100px" cellspacing="0">
<tbody>
<tr>
<td class="left">30px wide</td>
<td class="right">70px wide</td>
</tr>
<tr>
<td class="left">30px wide</td>
<td class="right">70px wide</td>
</tr>
<tr>
<td class="left">30px wide</td>
<td class="right">70px wide</td>
</tr>
<tr>
<td class="left">30px wide</td>
<td class="right">70px wide</td>
</tr>
</tbody>
</table>
it suffices to define the first TD's... it looks like:
<table width="100px" cellspacing="0">
<tbody>
<tr>
<td class="left">30px wide</td>
<td class="right">70px wide</td>
</tr>
<tr>
<td>30px wide</td>
<td>70px wide</td>
</tr>
<tr>
<td>30px wide</td>
<td>70px wide</td>
</tr>
<tr>
<td>30px wide</td>
<td>70px wide</td>
</tr>
</tbody>
</table>
And in following, Im writing css class name in every row. Is there a way that I can do it in more general way?
I assume you mean "... in every column". No, if you want cross-browser support, this is currently indeed the only way to do it.
In CSS 3, there is the :nth-child pseudo-class, but it is fully supported only by FF >= 3.5 and Chrome.
Just define classes for td in first row. See example.
Use <th> tags for the first row of the table and then you could have:
th.left {
width: 30px;
}
th.right {
width: 70px;
}
You can use <col> elements to define widths for a column at a time. Something like
<table>
<col class="left">
<col class="right">
<tr>
<td>30px wide</td>
<td>70px wide</td>
</tr>
<tr>
<td>30px wide</td>
<td>70px wide</td>
</tr>
</table>
Note, though, the styles you can set are quite limited -- so far, only width and background-color work for me (in Chrome 9). So if you have anything else set for the class (font sizes, text colors, alignment, etc), you might want to stick to keeping the class on each <td>.