Currently I am getting the data-name of the second <td> and using CSS to place it inside the second <td> and then add a line. Instead, I would like to get the value of what is between the FIRST <td></td> and place that inside the SECOND/LAST <td></td> instead of using the attr(data-name) is this possible purely with CSS and NO JavaScript/jQuery?
JSFiddle example: https://jsfiddle.net/90e6u449/
HTML
<table>
<tr>
<td>Some text</td>
<td data-name="Some text">Column 2</td>
</tr>
</table>
CSS
table tr td:last-child:before {
content: attr(data-name) ": \A";
white-space: pre;
font-weight: bold;
}
table tr td:first-child {
display: none;
}
NO. This is not possible with css.
You cannot get attribute value in other element set in another element.
Javascript or Jquery is the best option.
You cannot make function/action with css.
Related
I am using HTML and CSS to display sentences aligned with word-by-word IPA transcriptions:
<table>
<tr class="eng">
<td>This </td>
<td>is</td>
<td>an</td>
<td>example</td>
<td>sentence.</td>
</tr>
<tr class="ipa">
<td>ðɪs</td>
<td>ɪz</td>
<td>ən</td>
<td>ɪɡˈzæmpl̩</td>
<td>ˈsɛntəns</td>
</tr>
</table>
tr.eng {
font-weight: bold;
}
tr.ipa {
font-style: italic;
}
td {
white-space: nowrap;
text-align: center;
}
.eng td:first-child {
text-align: left;
}
.eng td:last-child {
text-align: right;
}
http://jsfiddle.net/2ab9pgmd/
If a sentence is too long for the screen, I would like both rows to wrap to a new line, so that it could look like following hard-coded example:
<table>
<tr class="eng">
<td>This </td>
<td>is</td>
<td>an</td>
<td>example</td>
</tr>
<tr class="ipa">
<td>ðɪs</td>
<td>ɪz</td>
<td>ən</td>
<td>ɪɡˈzæmpl̩</td>
</tr>
</table>
<table>
<tr class="eng">
<td>sentence.</td>
</tr>
<tr class="ipa">
<td>ˈsɛntəns</td>
</tr>
</table>
Is it possible to set up an HTML table to wrap multiple rows to new lines dynamically depending on the screen size, rather than manually defining the line lengths in advance?
I found a similar example of what I would like to do here, but this solution does not keep the columns aligned for tables with more than one row.
If possible, I would rather not use JavaScript so the text can be viewed as an eBook.
I prefer you go with the CSS Grid cause when you use table row for wrapping it wont get wrapped up and wont provide you the desired output . You can add wrapping rules but I don't think it will work.
I have this table <table></table> and there are many <label></label>'s inside. Is there a way to apply some property to all the labels inside the table but to none of the labels outside.
In other words, I'd like to write something:
FOR each label IN my table:
APPLY: property
PS: I know about the classes, but if I use class, I'll have to use <class= > for each label manually.
Are you just trying to style <label>'s that are inside a table? If so, just use a parent/child selector so only those applicable are styled as follows:
table label {
color: red;
}
<table border="1">
<tbody>
<tr>
<td><label>LABEL INSIDE TABLE</label></td>
</tr>
</tbody>
</table>
<label>LABREL OUTSIDE TABLE</label>
If you add a class to the appropritate table's, you can style labels only in those tables:
table.test label {
color: red;
}
<table border="1" class="test">
<tbody>
<tr>
<td><label>LABEL INSIDE TABLE with class TEST</label></td>
</tr>
</tbody>
</table>
<table border="1">
<tbody>
<tr>
<td><label>LABEL INSIDE TABLE with no class</label></td>
</tr>
</tbody>
</table>
<label>LABREL OUTSIDE TABLE</label>
what you need is google more and read more.
it called css selector. you can use it like this
table label{
color:red;
background:green;
}
and so on. the class it self it's to specify what this particular label should do and this label should do. you can find it more in here all about selector
I have table with some rows.
I would like to create a CSS that allow me to change the color for the first TD element in a TR row recursively only for a table which has the class mytable.
Could you give me a sample of CSS?
<table class="mytable">
<tr>
<td>Event Title:</td><!--Change color here-->
<td>{EventTitle}</td>
</tr>
<tr>
<td>Start date:</td><!--Change color here-->
<td>{DateTimeStart}</td>
</tr>
<tr>
<td>End date:</td><!--Change color here-->
<td>{DateTimeEnd}</td>
</tr>
</table>
For this you can use :first-child property. Write like this:
.mytable td:first-child{
color:red;
}
Use the CSS "first-child" element: http://www.w3schools.com/cssref/sel_firstchild.asp
So can do something like:
.mytable td:first-child {
something here
}
as #sandeep has written you can use first-child to achieve the goal. Better approach, if possible, is to add a class name to your first td. If this is supposed to be the header, you might also want to use th instead of td
Sandeep has the right idea, but you seem to be asking for a style rule that's slightly more specific. Try this:
table.mytable td:first-child {}
:first-child does not work in IE, a practical approach would be to change these td which you are gonna apply a background to th and then style them
You can try this:
HTML
<table class="mytable">
<tr>
<td>Event Title:</td><!--Change color here-->
<td>{EventTitle}</td>
</tr>
<tr>
<td>Start date:</td><!--Change color here-->
<td>{DateTimeStart}</td>
</tr>
<tr>
<td>End date:</td><!--Change color here-->
<td>{DateTimeEnd}</td>
</tr>
</table>
CSS
.mytable tr td:first-child{
color:red;
}
http://jsfiddle.net/hrBAn/1/
Is there a way to put some CSS into the BODY part of my html page without using inline CSS?
e.g.: I want to make all elements of one table red. Downside here: need same style=".." for every TD.
<table>
<tr>
<td style="background-color:#f00">RED</td>
<td style="background-color:#f00">RED</td>
</tr>
</table>
If you want all 'td' elements of one specific table with a specific css style, you should use this code:
html:
<table id="tableOne">
<tr>
<td>red background</td>
<td>red background</td>
</tr>
</table>
<table>
<tr>
<td>blank background</td>
<td>blank background</td>
</tr>
</table>
css:
#tableOne td{
background-color: #FF0000;
}
<table class="myClass">
<tr>
<td>RED</td>
<td>RED</td>
</tr>
</table>
And your css class myClass:
.myClass td
{
background: #F00;
}
To keep all the code within the body you could use javascript to first find all TD's then apply the background color:
<script>
var cells = document.getElementsByTagName("td");
for (var i=0; i<cells.length; i++) {
cells[i].style.backgroundColor = '#c0c0c0';
}
</script>
In an embedded or external style sheet:
td { background: #F00; }
That's all.
This question already has answers here:
how to make a whole row in a table clickable as a link?
(28 answers)
Closed 2 years ago.
I know it is possible to link an entire table cell with CSS.
.tableClass td a{
display: block;
}
Is there a way to apply a link to an entire table row?
I agree with Matti. Would be easy to do with some simple javascript. A quick jquery example would be something like this:
<tr>
<td>example</td>
<td>another cell</td>
<td>one more</td>
</tr>
and
$('tr').click( function() {
window.location = $(this).find('a').attr('href');
}).hover( function() {
$(this).toggleClass('hover');
});
then in your CSS
tr.hover {
cursor: pointer;
/* whatever other hover styles you want */
}
Use the ::before pseudo element. This way only you don't have to deal with Javascript or creating links for each cell. Using the following table structure
<table>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
</table>
all we have to do is create a block element spanning the entire width of the table using ::before on the desired link (.rowlink) in this case.
table {
position: relative;
}
.rowlink::before {
content: "";
display: block;
position: absolute;
left: 0;
width: 100%;
height: 1.5em; /* don't forget to set the height! */
}
demo
The ::before is highlighted in red in the demo so you can see what it's doing.
Unfortunately, no. Not with HTML and CSS. You need an a element to make a link, and you can't wrap an entire table row in one.
The closest you can get is linking every table cell. Personally I'd just link one cell and use JavaScript to make the rest clickable. It's good to have at least one cell that really looks like a link, underlined and all, for clarity anyways.
Here's a simple jQuery snippet to make all table rows with links clickable (it looks for the first link and "clicks" it)
$("table").on("click", "tr", function(e) {
if ($(e.target).is("a,input")) // anything else you don't want to trigger the click
return;
location.href = $(this).find("a").attr("href");
});
Example: http://xxjjnn.com/linktablerow.html
Link entire row:
<table>
<tr onclick="location.href='SomeWherrrreOverTheWebsiiiite.html'">**
<td> ...content... </td>
<td> ...content... </td>
...
</tr>
</table>
Iff you'd like to do highlight on mouseover for the entire row, then:
<table class="nogap">
<tr class="lovelyrow" onclick="location.href='SomeWherrrreOverTheWebsiiiite.html'">**
...
</tr>
</table>
with something like the following for css, which will remove the gap between the table cells and change the background on hover:
tr.lovelyrow{
background-color: hsl(0,0%,90%);
}
tr.lovelyrow:hover{
background-color: hsl(0,0%,40%);
cursor: pointer;
}
table.nogap{
border-collapse: collapse;
}
Iff you are using Rails 3.0.9 then you might find this example code useful:
Sea has many Fish, Fish has many Scales, here is snippet of app/view/fish/index.erb
<table>
<% #fishies.each do |fish| %>
<tr onclick="location.href='<%= sea_fish_scales_path(#sea, fish) %>'">
<td><%= fish.title %></td>
</tr>
<% end %>
</table>
with #fishies and #sea are defined in app/controllers/seas_controller.rb
Also it depends if you need to use a table element or not. You can imitate a table using CSS and make an A element the row
<div class="table" style="width:100%;">
<a href="#" class="tr">
<span class="td">
cell 1
</span>
<span class="td">
cell 2
</span>
</a>
</div>
css:
.table{display:table;}
.tr{display:table-row;}
.td{display:table-cell;}
.tr:hover{background-color:#ccc;}
I feel like the simplest solution is sans javascript and simply putting the link in each cell (provided you don't have massive gullies between your cells or really think border lines). Have your css:
.tableClass td a{
display: block;
}
and then add a link per cell:
<table class="tableClass">
<tr>
<td>Link name</td>
<td>Link description</td>
<td>Link somthing else</td>
</tr>
</table>
boring but clean.
To link the entire row, you need to define onclick function on your row, which is <tr>element and define a mouse hover in the CSS for tr element to make the mouse pointer to a typical click-hand in web:
In table:
<tr onclick="location.href='http://www.google.com'">
<td>blah</td>
<td>blah</td>
<td><strong>Text</strong></td>
</tr>
In related CSS:
tr:hover {
cursor: pointer;
}
I think this might be the simplest solution:
<tr onclick="location.href='http://www.mywebsite.com'" style="cursor: pointer">
<td>...</td>
<td>...</td>
</tr>
The cursor CSS property sets the type of cursor, if any, to show when
the mouse pointer is over an element.
The inline css defines that for that element the cursor will be formatted as a pointer, so you don't need the 'hover'.