Here I have created one page. Trying to learn responsive page design too.
EXAMPLE FIDDLE
Above second table, there is one line 'Twitter timline'.
In the same line above the 2nd table I have created button export to csv. How can I align it to left?
How can I place small rounded button there?
HTML
<h3> Twitter time line </h3>
<table class="table table-condensed">
<thead>
<tr class="active">
<td class="active">Results</td>
<td class="success">Date</td>
<td class="warning">Time</td>
<td class="danger">Twitter user</td>
<td class="info">Reach</td>
<td class="active">Contant</td>
<td class="active">Tweet</td>
</tr>
</thead>
<tbody>
<tr class="active">
<td class="active">1</td>
<td class="success">john</td>
<td class="warning">carry</td>
<td class="danger">..dfd.</td>
<td class="info">.dfd..</td>
<td class="active">.fdfd..</td>
<td class="success">...dfd</td>
</tr>
</tbody>
</table>
<div class="row demo-row">
<div class="col-xs-6">
<h3> Twitter time line </h3>
</div>
<div class="col-xs-3"> Export
</div>
check this fiddle
read more about bootstrap grid system
JSFIDDLE
<div class="row buttonWithText">
<h3> Twitter time line </h3>
<div class="col-xs-3 export">
Export
</div>
</div>
body > div.row.buttonWithText
{
margin-bottom:10px;
}
div.col-xs-3.export
{
vertical-align:middle;
}
h3{
float:left;
margin:0px;
display:table-cell;
line-height:45px;
}
Related
i have a scenerio where i have a table, inside this table is one table row (tr) and this row contains 3 table cells (td's). When browser or device size become less than 768px these td's are displayed like a row,so user do not need to scroll x-axis. Now i have issue on iphone Safari and Chrome browsers where these td's are not displayed as a row. i am using following Code.
#media only screen and (max-width: 736px) {
.tabular_structure > td {
display:table-row !important;
}
}
.table-left{
width:20%;
table-layout:fixed;
}
.table-center{
width:60%;
table-layout:fixed;
}
.table-right{
width:20%;
table-layout:fixed;
}
<table>
<tr class="tabular_structure">
<td class="table-left">
<table class="col-md-12 col-lg-12 col-sm-10 ">
<tbody>
<tr style="height:auto; width:100%;">
<td style="border-top:0px;">
</td>
</tr>
<tr>
<td>
<div>
<h5 class="customText">An Initiative</h5><br></div>
<div class="container-fluid">
<div class="offsetClass" style="display: block">
<div class="form-group col-md-6 col-6 col-lg-6">
<p class="customText" style="text-align:center">Sun Rise</p>
</div>
<div class="form-group col-md-6 col-6 col-lg-6 pull-right">
<p class="customText" style="text-align:center">Sun Set</p>
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td class="col-md-8 col-lg-8 col-sm-10">
</td>
</tr>
<tr>
<td>
</td>
</tr>
</tbody>
</table>
</td>
<td class="table-center">
<table>
<tbody>
<tr class="green-border">
<p>Second cell</p>
</tr>
</tbody>
</table>
</td>
<td class="table-right">
<p>Third Cell
</p>
</td>
</tr>
</table>
This is what I have for two side by side columns of key-value pairs with fixed width between the key-values. The columns should get further apart on resize, but not the key value pairs themselves.
I don't really understand how the 'width: 1%' is working. Is there a better solution to this? Is there anything wrong with the way I've done this?:
http://jsfiddle.net/zdt6ejq0/3/
<table width="50%" style="float: left">
<tr>
<td style="vertical-align: top; width: 1%"><b>Inment:</b></td>
<td style="vertical-align: top">{wbsSubstructure}</td>
</tr>
<tr>
<td><b>ACDnge Oer:</b></td>
<td>{changder}</td>
</tr>
<tr>
<td><b>Coct Ne:</b></td>
<td> {cact}</td>
<tr>
<td style="vertical-align:top;"><b>Den:</b></td>
<td> {dil}</td>
</tr>
</table>
<table width="50%" class="data" style="float: right">
<tr>
<td style="vertical-align: top; width: 1%"><b>Inon De:</b></td>
<td style="vertical-align: top">{ine}</td>
</tr>
<tr>
<td><b>Sc Nr:</b></td>
<td> {spmber}</td>
</tr>
<tr>
<td><b>Cct Nr:</b></td>
<td> {cumber}</td>
</tr>
<tr>
<td style="vertical-align:top;"><b>Don:</b></td>
<td> {dil}</td>
</tr>
</table>
You could place the tables inside two divs, one floating left, one floating right.
I also recommend to use css classes, not style tags, inside html.
Like this:
http://jsfiddle.net/69x3rstc/
<div class="container">
<div class="floatLeft">
<table>
<tr >
<td><b>Inment:</b></td>
<td>{wbsSubstructure}</td>
</tr>
<tr >
<td ><b>ACDnge Oer:</b></td>
<td>{changder}</td>
</tr>
<tr >
<td ><b>Coct Ne:</b></td>
<td> {cact}</td>
<tr >
<td><b>Den:</b></td>
<td> {dil}</td>
</tr>
</table>
</div>
<div class="floatRight">
<table class="data">
<tr >
<td><b>Inon De:</b></td>
<td>{ine}</td>
</tr>
<tr >
<td ><b>Sc Nr:</b></td>
<td> {spmber}</td>
</tr>
<tr >
<td ><b>Cct Nr:</b></td>
<td> {cumber}</td>
</tr>
<tr >
<td><b>Don:</b></td>
<td> {dil}</td>
</tr>
</table>
</div>
</div>
CSS
.floatLeft { width: 50%; float: left; }
.floatRight {width: 50%; float: right; }
.container { overflow: hidden; }
There are many ways to do this, each variation depends on your stack, personal preference and or requirements. If you are not locked down to using a table. My preference is to use divs instead to achieve the same effect. This allows you to make use of modern css3 attributes and not be bound by the constraints of a table element. Yes, tables are semantically correct for tabular data, however, the responsive world puts a world of complexities that tables weren't initially designed for.
Ex:
.tabular-data {
display: flex;
flex-wrap: wrap;
}
.column {
flex-basis: 50%;
display: flex;
}
.column .column-inner:first-child {
flex-basis: auto;
flex-wrap: nowrap;
}
.column .column-inner:last-child {
flex-grow: 1;
padding-left: 0.5rem;
}
<div class="tabular-data">
<div class="column">
<div class="column-inner">
<div class="cell"><strong>Inment:</strong></div>
<div class="cell"><strong>ACDnge Oer:</strong></div>
<div class="cell"><strong>Coct Ne:</strong></div>
<div class="cell"><strong>Den:</strong></div>
</div>
<div class="column-inner">
<div class="cell"> {dil}</div>
<div class="cell"> {cact}</div>
<div class="cell">{wbsSubstructure}</div>
<div class="cell">{changder}</div>
</div>
</div>
<div class="column">
<div class="column-inner">
<div class="cell"><strong>Inon De:</strong></div>
<div class="cell"><strong>Sc Nr:</strong></div>
<div class="cell"><strong>Cct Nr:</strong></div>
<div class="cell"><strong>Don:</strong></div>
</div>
<div class="column-inner">
<div class="cell">{ine}</div>
<div class="cell">{spmber}</div>
<div class="cell">{cumber}</div>
<div class="cell">{dil}</div>
</div>
</div>
</div>
I would like to remove the white space between Table Title and Sub Titles.
Also Sub Title "Sub1" together with the icon should be left-aligned within the cell
<div class="mdc-layout-grid__cell stretch-card mdc-layout-grid__cell--span-3">
<div class="mdc-card p-0">
<h6 class="card-title">Table title</h6>
<div class="table-responsive">
<table class="table">
<thead bgcolor="#aed581">
<tr>
<th>
<span class="text-left">Sub1</span>
<span class="material-icons refresh-icon">refresh</span>
</th>
<th>Sub2</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-left">A</td>
<td>18.5%</td>
</tr>
<tr>
<td class="text-left">B</td>
<td>16.3%</td>
</tr>
<tr>
<td class="text-left">V</td>
<td>15.5%</td>
</tr>
</table>
</div>
</div>
</div>
You need do with some css for remove that space
apply this css into ur css file margin-bottom: 0; will remove space from table-responsive and card title
.card-title{
background-color: #aed581;
padding: 15px;
font-weight: bold;
margin-bottom: 0;
}
.fa-repeat{
color: lightgray;
cursor: pointer;
}
and for icon i used font-awesome icon here is the CDN link
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css
Here is the HTML
<div class="mdc-layout-grid__cell stretch-card mdc-layout-grid__cell--span-3">
<div class="mdc-card p-0">
<h6 class="card-title">Table title</h6>
<div class="table-responsive">
<table class="table">
<thead bgcolor="#aed581">
<tr>
<th>
<i class="fa fa-repeat"></i>
Sub1
<!-- <span class="material-icons refresh-icon">refresh</span> -->
</th>
<th>Sub2</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-left">A</td>
<td>18.5%</td>
</tr>
<tr>
<td>B</td>
<td>16.3%</td>
</tr>
<tr>
<td>V</td>
<td>15.5%</td>
</tr>
</table>
</div>
</div>
</div>
You can edit or preview code here
I want to display an image in a table in the center of a cell, but this is what i get. My image covers the complete cell rather than being placed in the center of the cell . I am using an img-responsive class for image and table-responsive for table both from the bootstrap file.
Further, whenever I load the page, i get one of the following outputs randomly with absolutely no change in the code.
Why does this happen??
In both the cases image, image will be seemed to be positioned to the left side of the column, how do I correct it so that image is positioned in the center.
Following is the code
<div class="table-responsive inside_content ps-container" style="margin-bottom: 50px">
<style>
th,td{
text-align: center;
}
</style>
<table id="event" class="table table-striped table-responsive">
<thead>
<tr>
<th>Serial No.</th>
<th>Section</th>
<th>TimeStamp</th>
<th>Archive_Status</th>
<th>Event Picture</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>
test1 </td>
<td>
Event3 </td>
<td>
2015-01-08 19:41:45 </td>
<td>
0 </td>
<td>
<a class="event_group1" href="http://localhost/IOCLALL/IOCLbackend/../IOCLfrontend/images/events/WWW.YTS_.RE_.jpg">
<img alt="No Image" class="img-responsive" style="max-width:145;max-height: 208px" src="http://localhost/IOCLALL/IOCLbackend/../IOCLfrontend/images/events/WWW.YTS_.RE_.jpg" />
</a>
</td>
<td>
<span class="fa fa-fw fa-trash" ></span>
<span class="fa fa-fw fa-edit" ></span>
</td>
</tr>
</tbody>
</table>
</div>
You must treat the TD like you would treat a P,
add a text-align:center to the TD and a display:inline-block to the image
<td style="text-align: center;">
<img style="display: inline-block;" />
</td>
<td style="text-align: center;">
add css to that td to align text in the center, it should apply for the image as well
Add align="center" to the cell .
Eg.
<td align="center">
<img src="...
how about adding
display:inline / inline-block;
margin:0px auto;
I hope it will answer your question
Following is the code structure of my HTML table. I insert a large image in tr class c0 (marked by *...*). The class no-overflow has overflow:auto. In other pages, using the same class no-overflow there are horizontal and vertical scroll bars if the image gets big. However, in this particular case, the bars do not appear.
<table class="someclass" width="60%">
<thead>
<tr>
<th class="header c0" style="text-align:left;">Content: Test 1</th>
<th class="header c1">Class Statistics</th>
</tr>
</thead>
<tbody>
**<tr class="r0">
<td class="cell c0" style="text-align:left;">Question: <br>
<div class="no-overflow">
<div class="no-overflow">
<p><img src="image path" width="1365" height="767"></p>
</div>
</div>
</td>
<td class="cell c1" style=""> </td>
</tr>**
<tr class="r1">
<td class="cell c0" style="text-align:left;">Answer:</td>
<td class="cell c1" style=""> </td>
</tr>
<tr class="r0">
<td class="cell c0" style="text-align:left;"><input type="button" name="1" value="Next"> Next </td>
<td class="cell c1" style=""></td>
</tr>
<tr class="r1 lastrow">
<td class="cell c0" style="text-align:left;"></td>
<td class="cell c1" style=""> </td>
</tr>
</tbody>
</table>
Table Image:
overflow:auto by itself on a table-cell isn't going to do anything, unfortunately. Table cells will resize themselves to allow them to fit their contents. However, if you add a fixed width and height to the table cell, the overflow works fine and the scroll bars are visible.
See this fiddle.