Im trying to make a div scrollable (this div have a table inside) and is inside another div (this div have height: 100%). This little image show the result i need.
This is the code im using but if you can see in the image the scroll is not showing.
#main-aside
{
padding-top: 5px;
padding-right: 5px;
}
.table-search {
margin:0 auto;
width: 440px;
height: 41px;
padding: 3px 4px 1px 4px;
background: #212020;
border-bottom: #000 1px solid;
}
#listEmployeeTable { // this is the div that contains the table, not working now
overflow-y: auto;
overflow-x: hidden;
}
.employee-table-column table{
width: 440px; // table have a width specified
}
<aside id="main-aside" class="x-east">
<div class="table-search">
<label>Search by name</label>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-search"></i></span>
<input type="text" class="form-control" id="searchEmployeList">
</div>
</div>
<div id="listEmployeeTable" class="employee-table-column">
<table class="table-striped employee-data-table">
<thead>
<tr>
<th class="name">Name</th>
<th class="time">Time</th>
<th class="action">Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>NAME 1</td>
<td class="Time">04/12/2015 03:04 AM</td>
<td class="Action">Start after left</td>
</tr>
</tbody>
</table>
</div>
</aside>
Currently this is how it looks
Related
My code is below, I would like to add horizontal lines within the table to separate each row's content:
.Favourites-table {
position: relative;
width: 70%;
text-align: center;
/*border: 1px solid orangered;*/
margin: 0 auto;
top: 130px;
height: 300px;
}
.Favourites-table th {
position: relative;
border: 1px solid orangered;
color: #fd886b;
width: 100%;
height: 300px;
}
.horizontal-line {
position: relative;
width: 100%;
background-color: orangered;
padding: 1px 0px;
}
.Favourites-table tr {
position: relative;
border: 1px solid orangered;
width: 100%;
height: 100px;
}
<table class="Favourites-table">
<tr class="Favourites-titlerow">
<th>Search name</th>
<th>Email notifications</th>
<th>options</th>
</tr>
<tr class="Favourites-row">
<td>
<image src="../1x/"></image>
<h4>wetpoo</h4>
</td>
<td><span id="emailnotify-on" style="display: none;">On</span> <span class="hide-off" id="emailnotify-off" style="display: inline;">Off</span></td>
<td> <a class="delete-row" href="#">Delete <a class="edit-search" href="#">Edit search</a></td>
</tr>
<tr class="Favourites-row">
<td></td>
<td></td>
<td></td>
</tr>
</table>
I tried styling the TH and TR to add the line in, and I also tried to create a line using <hr> and add it in the table but I can't get any of it to work.
You don't need anything more than to set a border-bottom on tr > td.
To skip having a border on the last table row, use tr:not(:last-of-type) > td.
You may set a border directly on the <tr> instead of the <td> but you may run into problems with CSS's table formatting model (which is completely unrelated and separate from CSS's display: grid formatting model, btw).
Also, you should use explicit <thead> and <tbody> elements (they always exist in the DOM) (as a bonus, this makes it easier to use position: sticky; and means you don't need a separate CSS class name).
So change your CSS and HTML to something like this snippet below:
(Note that the table needs at least two rows for the border-bottom to be visible, otherwise the single row in a table will won't match the :not(:last-of-type) selector so it won't render the border.
table.Favourites-table > tbody > tr:not(:last-of-type) > td {
border-bottom: 3px solid black;
}
/* Additional styles you might want to use too: */
table.Favourites-table {
border-collapse: collapse;
width: 100%;
border: 1px solid #eee;
}
table.Favourites-table > thead > tr > * {
position: sticky;
top: 0;
background-color: orange; /* `position: sticky;` Needs an opaque background */
}
<table class="Favourites-table">
<thead>
<tr>
<th>Search name</th>
<th>Email notifications</th>
<th>options</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<img src="../1x/" alt="picture" />
<h4>wetpoo</h4>
</td>
<td>
<span id="emailnotify-on" style="display: none;">On</span>
<span class="hide-off" id="emailnotify-off" style="display: inline;">Off</span>
</td>
<td>
<a class="delete-row" href="#">Delete <a class="edit-search" href="#">Edit search</a>
</td>
</tr>
<tr>
<td>
<img src="../1x/" alt="picture" />
<h4>wetpoo</h4>
</td>
<td>
<span id="emailnotify-on" style="display: none;">On</span>
<span class="hide-off" id="emailnotify-off" style="display: inline;">Off</span>
</td>
<td>
<a class="delete-row" href="#">Delete <a class="edit-search" href="#">Edit search</a>
</td>
</tr>
<tr>
<td>
<img src="../1x/" alt="picture" />
<h4>wetpoo</h4>
</td>
<td>
<span id="emailnotify-on" style="display: none;">On</span>
<span class="hide-off" id="emailnotify-off" style="display: inline;">Off</span>
</td>
<td>
<a class="delete-row" href="#">Delete <a class="edit-search" href="#">Edit search</a>
</td>
</tr>
</tbody>
</table>
I am trying to make a web-page where I have a table of information and an image side-by-side as in the example below
Example:
bar fOo
Instead of:
bar
fOo
I have placed the image within a div and the information table in another div element, and I have been playing with the CSS properties to try to get them to be side-by-side, however they refuse to work as expected.
The CSS is below, #book is the image itself, while book_information is the information inside the table.
#book
{
float: right;
flex: 33.33%;
padding: 5px;
margin-left: 0;
width: 50%;
}
#book_information
{
width: 50%;
float: left;
padding-right: 0;
margin-right: 0;
}
table
{
border-collapse: collapse;
float:top;
border: 1px solid black;
table-layout: fixed;
width: 50%;
}
What should I use to allow this to work as expected? and what improvements could work I work on to get it responsive?
Below is the html structure of the page at the moment that I am using along with this:
<main>
<div>
<div class= "left" id="book"><img src="Book.jpg" alt="></div>
<div class="left" id="book_information">
<table id="information">
<tr>
<td class="1">Price:</td>
<td class="1">€18.90</td>
</tr>
<tr>
<td>Author</td>
<td></td>
</tr>
<tr>
<td class="1">About</td>
<td class="1"><p></p></td>
</tr>
<tr>
<td>Where to get it:</td>
<td>Amazon ,
Casa Del Libro ,
FNAC ,
Libelista
</td>
</tr>
</table>
</div>
</div>
</main>
There are different ways of doing this.
Here's a solution that involves using float:left style for your table:
table {
float: left;
}
img {
width: 100px;
height: 100px;
}
<table>
<tr>
<td>Price</td>
<td>$5</td>
</tr>
<tr>
<td>Author</td>
<td>Bob</td>
</tr>
</table>
<div>
<img
src="https://via.placeholder.com/120.png?text=Book+Image"
alt="Book Image Here">
</div>
This one involves putting your table and image in yet another table:
img {
width: 100px;
height: 100px;
}
<table>
<tr>
<td>
<table>
<tr>
<td>Price</td>
<td>$5</td>
</tr>
<tr>
<td>Author</td>
<td>Bob</td>
</tr>
</table>
</td>
<td>
<div>
<img
src="https://via.placeholder.com/120.png?text=Book+Image"
alt="Book Image Here">
</div>
</td>
</tr>
</table>
Using table-responsive with header fields, the right most column has buttons and no text in the header. When the width is too small, the column is cut off and not completely viewable using the scroll. If text is added for the header, nearly all of the column is visible, but I don't want to do this and it's not a complete solution.
<div class="row">
<div class="col-sm-12">
<div class="table-responsive">
<table st-table="appointments" class="table table-striped table-appointments">
<thead>
<tr>
<th>Family Id</th>
<th>Survey Name</th>
<th>Appointment Date</th>
<th>Start Time</th>
<th>Progress</th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="appointment in $ctrl.appointments">
<td class="appointments-familyid">{{appointment.familyIdName}}</td>
<td class="appointments-survey">{{appointment.surveyName}}</td>
<td class="appointments-date">{{appointment.date | date:'MMMM dd, yyyy'}}</td>
<td class="appointments-starttime">{{appointment.startTime | date:'hh:mm a'}}</td>
<td class="appointments-progress">{{appointment.progress}}</td>
<td class="appointments-begin">
<button type="button" ng-click="$ctrl.startSurvey(appointment)" class="btn btn-sm btn-success">
Begin Survey
<i class="glyphicon glyphicon-circle-arrow-right">
</i>
</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
CSS:
td.appointments-familyid{
width: 5%;
}
td.appointments-counselor{
width: 20%;
}
td.appointments-survey{
width: 25%;
}
td.appointments-date{
width: 10%;
}
td.appointments-starttime{
width: 15%;
}
td.appointments-progress{
width: 15%;
}
td.appointments-begin{
width:10%;
}
table.table-appointments td{
max-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
table-responsive adds:
.table-responsive {
min-height: .01%;
overflow-x: auto;
margin-right: 20px;
}
The rendered table looks like this:
I am making a web page (code below the question). In that I have a main division whose width is 90% and whose background color is white. In this division again I have made 4 divisions where in the division is split in 4 equal quadrants. I am hoping to get white color as the background for all these divisions however they are taking the bgcolor attribute of body tag. How do I get these divisions to have the same background as that of their parent div?
Code:
<body bgcolor="grey">
<div style="width: 90%; margin:0 auto; text-align:justify; background-color: white;" >
<div id="div1" align="center" style="width: 50%; height: 50%; float: left; background-color: white;">
<h3> This Division </h3>
<h4>With separate bg attr</h4>
<table>
<thead>
<tr>
<th>A</th>
<th>B</th>
</tr>
</thead>
<tbody>
<tr>
<td> C </td>
<td> 756 </td>
</tr>
<tr>
<td>D</td>
<td>749</td>
</tr>
<tr>
<td onclick="display('test');">E</td>
<td>8</td>
</tr>
</tbody>
</table>
</div>
<div id="div2" style="width: 50%; height: 50%; float: left;"> This is division 2</div>
<div id="div3" style="width: 50%; height: 50%; float: left;">This is division 3 </div>
<div id="div4" style="width: 50%; height: 50%; float: left;">This is division 4</div>
</div>
the problem is that you are using Float:left for your child Div
and no floating for parent div that's why Parent div is not filling the area
just add float:left to parent div then it will work as you want
<div style="width: 90%; margin:0 auto; text-align:justify; background-color: white;float;left" >
How do I get my panel width to only be big enough to contain my table?
Plunker: http://embed.plnkr.co/o0PDPAeo2lnLKNU55Ber/preview
The number of table columns are dynamic so I can't set it to a fixed width.
<div class="container">
<div class="table-responsive standings">
<div class="panel panel-primary">
<div class="table-responsive standings">
<table class="table table-striped table-condensed entry-grid">
<thead>
<tr>
<th>Name</th>
<th class="text-center">Strikes</th>
<th class="text-center pick-title">1</th>
...
<th class="text-center pick-title">12</th>
</tr>
</thead>
<tbody>
<tr>
<td>Entry 1</td>
<td class="text-center">1</td>
...
<td class="text-center pick">A</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
.container {
width: 750px;
padding: 20px;
}
.standings > table {
width: auto;
}
.standings .pick-title {
width: 42px;
}
.standings .pick {
height: 41px;
width: 41px;
padding: 8px 0;
font-size: 10px;
}
Thanks
You will want to give a display Inline-Block to your panel DIV. This way, the panel will adjust to it's content width
.panel{
display: inline-block;
}