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/
Related
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>
I have a table with contents inside of it. I would like to be able to resize the column to 0 pixels so it appears 'gone'. The problem is that since there are contents inside the header and cells, it will only resize down to the size of the content.
I simply want it to work like this: if I set header width to 10px, it should become 10px wide, regardless of what's inside the header or the columns.
I did a workaround by wrapping cell contents into a container, which is positioned absolute:
<table>
<tr>
<th style="width:0px">
<div class="cell-wrapper">Some super long content</div>
</th>
<th>
<div class="cell-wrapper">More content, could be an image</div>
</th>
</tr>
</table>
.cell-wrapper
{
position: absolute;
}
But there are multiple issues with this approach. Is there a way I can do this without the absolute positioning/container workaround? Thanks!
You could try something like this..
.cell-wrapper {
border: 1px solid black;
}
<table>
<tr>
<th style="display: table-column;">
<div class="cell-wrapper">Some super long content</div>
</th>
<th>
<div class="cell-wrapper">Another cell with long text</div>
</th>
</tr>
</table>
I have a html table as below:
<div id="myDiv" class="table">
<table class="table table-striped table-bordered">
<thead>
<tr data-bind="foreach: columnNames">
<th> <span data-bind="text: $data"></span>
</th>
</tr>
</thead>
<tbody data-bind="foreach: data">
<tr data-bind="foreach: $parent.columnNames">
<td style="width:20px"><input type="text" class="form-control textbox"/> </td>
</tr>
<tr>
<td>
<input type="button" value="Remove Row" data-bind="click: $parent.removeRow" class="btn btn-danger" />
</td>
</tr>
</tbody>
</table>
</div>
The columns to these are generated dynamically via a knockout JS code. The columns can be ranging from 3 (minimum) to 20 something. So I am trying to add a horizontal scrollbar to it so that user can scroll to right. I also want to set a fixed width of column say 20%.
Below is my JS fiddle which I have.
https://jsfiddle.net/aman1981/6fjcuhcf/41/
But I have tried many changes to the css but its not adding scroll not its keeping the columns width fixed.
Please see I have used suggestions as per Add horizontal scrollbar to html table
But its not adding scroll. What else am I missing here?
I was able to add scroll and make my columns fixed width using this css:
<style>
.table {
display: block;
overflow-x: auto;
white-space: nowrap;
width:1000px;
}
.table td,th {
display:inline-block;
width: 180px !important;
}
I am trying to get the same width to all columns,
Is there a proper way for Bootstrap?
<a href="produkte.html">
<div class="panel-body">
<table class="table">
<tbody>
<tr>
<th></th>
<th>#</th>
<th> # analog Eingänge</th>
<th> # I/Os</th>
</tr>
</tbody>
</table>
</div>
</a>
you have to set this style to your table
table {
table-layout: fixed;
}
Why not use cells and/or rows?
If you don't know then add this code(also learn it, it can be useful)
table {
table-layout: fixed;
}
As a backend dev I didnt know how hard frontend was ;).
How can I put the "Create" button above the left side of the table:
Right now the button is in the middle of the table because the table is in a . This is the full code:
<div align="center">
<h1>All Tournaments </h1>
<p>Show: History or Unplayed</p>
Create
<table style="width:50%" id="tournament_table">
<tr id="table_head">
<th>Name</th>
<th>Players needed</th>
<th>Rounds</th>
<th>Host</th>
<th>Select robot</th>
<th>Played</th>
<th>Join tournament</th>
The button is the element. I want the page look like this:
Thanks
EDIT: The complete page looks like this.
The text above and the table beneath the Create button need to be centered. If I pull the button out of the align center div it appears completely to the left.
Wrap in a div and add class text-left on parent as follows:
<div align="center" style="width: 50%; margin: 0 auto">
<div class="text-left">
<h1>All Tournaments </h1>
<p>Show: History or Unplayed</p>
Create
</div>
<table id="tournament_table">
<tr id="table_head">
<th>Name</th>
<th>Players needed</th>
<th>Rounds</th>
<th>Host</th>
<th>Select robot</th>
<th>Join tournament</th>
<th>Played</th>
</tr>
</table>
</div>
Add a class .pull-left to the button
Create
<div class="clearfix"></div>