I have a table:
<table id="table">
<thead>
<tr>
<th> ID </th>
<th> Job</th>
<th> Title</th>
</tr>
</thead>
</table>
I want to add two icons to the left of the table. I've tried adding divs, spans, nothing seems to work. I can see the icon displayed but it's about 20px higher than the table and far left.
Does anyone know how I can align this?
Also, I don't know if it makes a difference, but this table will grow as users input information. I need the icons to appear on every row. I already have the functionality to create new rows with user inputs so if I can just figure out how to align the icons on this simple table above then I can replicate for the other rows.
Thank you!
For reference - the icon is
class = "mdi mdi-alert"
Just thought I would provide that in case someone wanted to give an example like:
<div class="mdi mdi-alert">
<table>
....
</table>
</div>
Thanks!
You have two solutions.
A. Use pseudo-elements :
tr::before {
content: 'youricon';
position: absolute;
left: -20px;
top: 0
}
B. Add the icons inside the first cell and move them to the left :
.mdi {
position: absolute;
left: -20px;
top: 0
}
<table>
<tr>
<td><div class="mdi mdi-alert"></div></td>
</tr>
</table>
Related
I have several div elements where inside every div there is a table between some paragraphs (p) using the following code:
<p style="display: inline-block;">
Something BEFORE the table
<table style="display: inline-block;">
<thead>
<tr>
<th>header</th>
</tr>
</thead>
<tbody>
<tr>
<td>data</td>
</tr>
</tbody>
</table>
Something AFTER the table
</p>
which produces a nice content that looks something like this:
head
Something BEFORE the table Something AFTER the table
data
However on each div there are different content lengths BEFORE and AFTER the table making it look like this:
head
Something BEFORE the table Something AFTER the table
data
head
Short BEFORE the table Short AFTER the table
data
head
Something long BEFORE the table Something long AFTER the table
data
What I want is set some "margin" to every table so they are a set distance from the beginning of their parent element (p on this case) so it will hopefully look like this:
head
Something BEFORE the table Something AFTER the table
data
head
Short BEFORE the table Short AFTER the table
data
head
Something long BEFORE the table Something long AFTER the table
data
The BEFORE, table, and AFTER elements of the page must be handled like this as having each of these on their own div and displaying them side by side will mess with this page section styling and also will produce a similar problem but now oriented vertically (however if your solution requires to do this please do share... maybe I'll end up using it).
P.D: If your solution includes Bootstrap please use version 3.
P.D.2: I'm sorry about how messy the examples look I'm still getting used to this.
Wrap it in a table structure. This can be done with div's styled as tables. This way you can make it responsive.
! Do not ever again put other block level elements in a p element
See: Why is <table> not allowed inside <p>
Below is the HTML of what you need:
.table{
display: table;
widht: 100%;
}
.row {
display: table-row;
}
.cell{
display: table-cell;
padding: 0 7.5px;
}
<div class='table'>
<div class='row'>
<div class='cell'>
Something BEFORE the table
</div>
<div class='cell'>
<table>
<thead>
<tr>
<th>header</th>
</tr>
</thead>
<tbody>
<tr>
<td>data</td>
</tr>
</tbody>
</table>
</div>
<div class='cell'>
Something AFTER the table
</div>
</div>
<div class='row'>
<div class='cell'>
Something LONGGGGGG BEFORE the table
</div>
<div class='cell'>
<table>
<thead>
<tr>
<th>header</th>
</tr>
</thead>
<tbody>
<tr>
<td>data</td>
</tr>
</tbody>
</table>
</div>
<div class='cell'>
Something AFTER the table
</div>
</div>
</div>
Here is a simple and easy solution:
.before-table {
min-width: 250px;
display: inline-block;
}
<p style="display: inline-block;">
<div class="before-table">Something BEFORE the table</div>
<table style="display: inline-block;">
<thead>
<tr>
<th>header</th>
</tr>
</thead>
<tbody>
<tr>
<td>data</td>
</tr>
</tbody>
</table>
<span>Something AFTER the table</span>
</p>
To set an absolute position you can use position: absolute on the element you're trying to position. It will get positioned at coordinates (0,0) (top-left) of it's first non-static parent. (By default every element has a position set to static, until you explicitly set it to something else). So that means you also need to assign a position to the parent (p I'm your case) so that it overwrites the default. Something like position: relative on the parent should do the job.
After that you can use the "top, right, bottom, left" CSS properties respectively to set a custom position from the parent's top/right/bottom/left border.
p {
position: relative;
}
table {
position: absolute;
left: 150px; // or whatever distance works best
}
Something like this, or it's equivalent inline version should do.
I'm looking for a way to do something that ends up looking like
<table>
<tr>
<td>foo</td>
<td>baar</td>
</tr>
<tr>
<td colspan="2">foobar</td>
</tr>
</table>
but actually is
<table>
<tr>
<td>foo</td>
<td>baar</td>
<td class="fakerow">foobar</td>
</tr>
</table>
Is there a not-too-hacky way to do this?
I'd like to keep the columns aligned.
I understand the naive choices for any correct markup are limited. <tr><div>
I'm injecting the new cell/row via JavaScript and I'd like to keep it nested to allow sorting and styling.
Preferably by CSS only.
Preferably the new row has no fixed height.
I have tried something like
<tr style="position: relative; padding-bottom: …">
…
<td style="display: block; position: absolute; top: 0; right: 0; bottom: 0; height: …">
but it turned into insanity before anything even started working.
Couldn't do it via flex (essentially overriding all display: table-* styles) either without messing up columns.
Fiddle with my failed attempts.
Maybe grid? I'm not up to speed yet.
I have a table row that, when clicked, takes the user to a new page:
<tr routerLink="/users/{{user.id}}">
<!-- ... a bunch of cells with user name, etc -->
</tr>
That works fine, but as it's not an actual HTML link, it doesn't behave entirely like one in the browser (e.g. there's no option to open the link in a new tab).
I tried wrapping each <td> element in an <a> and removing the link styling with CSS, which behaves like a link but only when the mouse is over the text in the table cell.
Is there another way to get the table row to behave more like a hyperlink?
Try Like This.
You have to pass array params in order to create dynamic routing URL, Your case will work fine in static URL. Please refer "https://angular.io/api/router/RouterLink"
<tbody>
<tr routerLink="[/user, user.id]">
<td>John</td>
<td>Doe</td>
<td>john.doe#abc.com</td>
</tr>
</tbody>
After some research I found the option I like the most. Only do this if you care about native click behaviour such as:
CMD + Click
Shift + Click
Right Click + Copy Link
Here it is:
<table class="table-with-click">
<tr>
<td>
Tim
</td>
<td>
Programmer
</td>
</tr>
<tr>
<td>
Job
</td>
<td>
Programmer & IT
</td>
</tr>
</tabe>
.table-with-click tr {
position: relative;
}
.stretched-link::after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1; /* Or 0, if you have other buttons in your tables */
pointer-events: auto;
content: "";
background-color: rgba(0,0,0,0);
}
Note 0: I stole the idea of a stretched-link from Bootstrap if you already use Bootstrap you can skip that class.
Note 1: You can put the link in any of the <td> elements.
I am trying to add an icon in front of the table.
<div class="row">
<div class="col-xs-offset-8 col-xs-4">
<span class="fa fa-pencil pull-left"></span>
<table class="table table-condensed table-bordered">
<thead>
<th class="text-center">Date</th>
</thead>
<tbody>
<tr>
<td class="text-center">01/01/2015</td>
</tr>
</tbody>
</table>
</div>
I need to an pencil on the left of the table on the same line as "Date"
Any help would be appreciated
One of the best tricks for positioning an element involves using the top and position properties.
To make room for the pencil, we are adding a left margin to the table. We're giving the pencil relative positioning and placing it 20 pixels from the top.
Now it appears outside and to the left of the table.
.fa-pencil {
top: 20px;
position: relative;
}
table {
margin-left: 20px;
}
http://jsfiddle.net/a00ykzy0/1/
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'.