Responsive table not changing at high enough browser width - css

I have a table which uses bootstrap:
<table class="table table-bordered">
<tr>
<th class="text-center" colspan="4">
DRUG INFO
</th>
</tr>
<tr>
<td class="col-md-3"><span>{{item.fields[18].displayName}}</span></td>
<td class="col-md-3" colspan="2"><span>{{item.fields[25].displayName}}</span></td>
<td class="col-md-3"><span>{{item.fields[14].displayName}}</span></td>
</tr>
<tr>
<td>
<div data-strat-form-control data-field-display-id="1" data-vmformreadonly="formReadOnly" data-show-tool-tip="showToolTip(item.fields[19].htmlName)" data-strat-model="item" data-field="item.fields[18]"></div>
</td>
<td colspan="2">
<div data-strat-form-control data-field-display-id="1" data-vmformreadonly="formReadOnly" data-show-tool-tip="showToolTip(item.fields[26].htmlName)" data-strat-model="item" data-field="item.fields[25]"></div>
</td>
<td>
<div data-strat-form-control data-field-display-id="1" data-vmformreadonly="formReadOnly" data-show-tool-tip="showToolTip(item.fields[15].htmlName)" data-strat-model="item" data-field="item.fields[14]"></div>
</td>
<tr>
<td colspan="2">UD_UU_PKG</td>
<td colspan="2">SHORT_CYCL</td>
</tr>
<tr>
<td colspan="2">
<div data-strat-form-control data-field-display-id="1" data-vmformreadonly="formReadOnly" data-show-tool-tip="showToolTip(item.fields[52].htmlName)" data-strat-model="item" data-field="item.fields[52]"></div>
</td>
<td colspan="2" class="text-center">
<div data-strat-form-control data-field-display-id="20" data-vmformreadonly="formReadOnly" data-show-tool-tip="showToolTip(item.fields[53].htmlName)" data-strat-model="item" data-field="item.fields[53]"></div>
</td>
</tr>
</table>
My issue is that this table's responsive attributes are not fixing the layout early enough (and a high enough pixel width).
As the width reduces the table is supposed to move to the bottom of the page for responsive design like this:
But there is a windows of width where this doesn't happen and the table overlaps it's parent:
I have been looking for custom media queries but there aren't any for this section. I have also been working with column widths but reducing them makes the problem worse for some reason.
How would I fix this issue?

Related

Bootstrap table with certain rows different widths

I have a table:
<table class="table table-bordered">
<tr>
<th class="text-center" colspan="3">
DRUG INFO
</th>
</tr>
<tr>
<td class="col-md-4"><span>{{item.fields[18].displayName}}</span></td>
<td class="col-md-3"><span>{{item.fields[25].displayName}}</span></td>
<td class="col-md-5"><span>{{item.fields[14].displayName}}</span></td>
</tr>
<tr>
<td>
<div data-strat-form-control data-field-display-id="1" data-vmformreadonly="formReadOnly" data-show-tool-tip="showToolTip(item.fields[19].htmlName)" data-strat-model="item" data-field="item.fields[18]"></div>
</td>
<td>
<div data-strat-form-control data-field-display-id="1" data-vmformreadonly="formReadOnly" data-show-tool-tip="showToolTip(item.fields[26].htmlName)" data-strat-model="item" data-field="item.fields[25]"></div>
</td>
<td>
<div data-strat-form-control data-field-display-id="1" data-vmformreadonly="formReadOnly" data-show-tool-tip="showToolTip(item.fields[15].htmlName)" data-strat-model="item" data-field="item.fields[14]"></div>
</td>
<tr>
<td colspan="1">UD_UU_PKG</td>
<td></td>
<td colspan="1">SHORT_CYCL</td>
</tr>
<tr>
<td>
<div data-strat-form-control data-field-display-id="1" data-vmformreadonly="formReadOnly" data-show-tool-tip="showToolTip(item.fields[52].htmlName)" data-strat-model="item" data-field="item.fields[52]"></div>
</td>
<td>
</td>
<td>
<div data-strat-form-control data-field-display-id="20" data-vmformreadonly="formReadOnly" data-show-tool-tip="showToolTip(item.fields[53].htmlName)" data-strat-model="item" data-field="item.fields[53]"></div>
</td>
</tr>
</tr>
</table>
Currently it looks like this:
I am trying to figure out how to make the middle cell on the bottom 2 rows go away so that the 2 fields will be equal in size (50/50). I have tried a ton of html properties (width, colspan etc) as well as trying to manipulate the columns with bootstrap (class="col-md-6").
What am I doing wrong and how do I fix it?
EDIT: This is what I get with Banzay's recommendations:
You need to plan the table that contains of 4 cells in each row, than set colspan respectively.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table table-bordered">
<tr>
<th class="text-center" colspan="4">
DRUG INFO
</th>
</tr>
<tr>
<td class="col-md-4"><span>{{item.fields[18].displayName}}</span></td>
<td class="col-md-3" colspan="2"><span>{{item.fields[25].displayName}}</span></td>
<td class="col-md-5"><span>{{item.fields[14].displayName}}</span></td>
</tr>
<tr>
<td>
<div data-strat-form-control data-field-display-id="1" data-vmformreadonly="formReadOnly" data-show-tool-tip="showToolTip(item.fields[19].htmlName)" data-strat-model="item" data-field="item.fields[18]"></div>
</td>
<td colspan="2">
<div data-strat-form-control data-field-display-id="1" data-vmformreadonly="formReadOnly" data-show-tool-tip="showToolTip(item.fields[26].htmlName)" data-strat-model="item" data-field="item.fields[25]"></div>
</td>
<td>
<div data-strat-form-control data-field-display-id="1" data-vmformreadonly="formReadOnly" data-show-tool-tip="showToolTip(item.fields[15].htmlName)" data-strat-model="item" data-field="item.fields[14]"></div>
</td>
<tr>
<td colspan="2">UD_UU_PKG</td>
<td colspan="2">SHORT_CYCL</td>
</tr>
<tr>
<td colspan="2">
<div data-strat-form-control data-field-display-id="1" data-vmformreadonly="formReadOnly" data-show-tool-tip="showToolTip(item.fields[52].htmlName)" data-strat-model="item" data-field="item.fields[52]"></div>
</td>
<td colspan="2">
<div data-strat-form-control data-field-display-id="20" data-vmformreadonly="formReadOnly" data-show-tool-tip="showToolTip(item.fields[53].htmlName)" data-strat-model="item" data-field="item.fields[53]"></div>
</td>
</tr>
</table>
Just play with colspans:
<table>
<tr>
<th colspan="6">
DRUG INFO
</th>
</tr>
<tr>
<td colspan="2">Effective date</td>
<td colspan="2">Minimum order</td>
<td colspan="2">Total package</td>
</tr>
<tr>
<td colspan="2">
<input type="text">
</td>
<td colspan="2">
<input type="text">
</td>
<td colspan="2">
<input type="text">
</td>
<tr>
<td colspan="3">UD_UU_PKG</td>
<td colspan="3">SHORT_CYCL</td>
</tr>
<tr>
<td colspan="3">
<input type="text">
</td>
<td colspan="3">
<input type="checkbox">
</td>
</tr>
</table>
And don't use "col-*-*" classes with table columns. They are designed to build responsive grids.

How to code opening hours to show in nice alignment?

I've created a website here and in the Kontakt section I added opening hours but I couldn't figure out how to code it for the days to align nicely and the other information also.
so I just put a PNG there to simulate the look I was looking for.
Nevertheless I would like to know how to code it properly because when I view it on a bigger screen or on a tablet device it messes with the bracket it's in because it isn't even with the bracket next to it.
The following code is the code from the left bracket where the text is, and it's working perfectly but I don't know how to code opening hours correctly.
<section id="blog-area">
<div class="container">
<div class="row text-center inner">
<div class="col-sm-6">
<div class="blog-content"><br><br>
<h2 class="feature-content-title green-text">+ 421 903 977 345</h2>
<p><strong>Iľja Takács</strong><br><br>
iljatakacs#gmail.com<br>
facebook #lakovnaturen<br><br>
Tureň 390, 903 01 Senec | Areál bývalého PD Tureň</p><br>
</div>
</div>
Link to the png image: http://testinglakovna.borec.cz/img/otvaraciehodiny.png
I suggest that you make a table. This way you can define every width to the pixel and make sure everything is aligned the way you displayed on the website.
I made a simple JSFiddle hope that helps.
<table class="tg">
<tr>
<td class="day">Po</td>
<td class="time">09.00</td>
<td class="sign">-</td>
<td class="time">20.00</td>
</tr>
<tr>
<td class="day">Ut</td>
<td class="time">09.00</td>
<td class="sign">-</td>
<td class="time">20.00</td>
</tr>
<tr>
<td class="day">St</td>
<td class="time">09.00</td>
<td class="sign">-</td>
<td class="time">20.00</td>
</tr>
<tr>
<td class="day">St</td>
<td class="time">09.00</td>
<td class="sign">-</td>
<td class="time">20.00</td>
</tr>
<tr>
<td class="day">Pia</td>
<td class="time">09.00</td>
<td class="sign">-</td>
<td class="time">20.00</td>
</tr>
<tr>
<td class="day">So</td>
<td class="time">09.00</td>
<td class="sign">-</td>
<td class="time">20.00</td>
</tr>
<tr>
<td class="day">Ne</td>
<td class="extra" colspan="3">Na objednavku</td>
</tr>
</table>
Jsfiddle

Aligning the table to the top of the page

Here is the plunk below, I'm trying to push the internal table to the top of the page tried different CSS but it doesn't get aligned to the top.
<td width="30%">
<div>
<h4>Category properties</h4>
<table style=>
<tbody>
<tr>
<td>
Name
</td>
<td>
{{selectedCategory.name}}
</td>
</tr>
<tr>
<td>Source</td>
<td>{{selectedCategory.source}}</td>
</tr>
<tr>
<td>Tenancy</td>
<td>{{selectedCategory.tenancy}}</td>
</tr>
<tr>
<td>Display Name</td>
<td>{{selectedCategory.displayName}}</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</table>
http://plnkr.co/edit/C4vDxt09kmLPUPQNssL4?p=preview

How can I make a data table work properly using Zurb Ink

I am using Ink to try and create an order confirmation e-mail from an ecommerce store. If I have a table that shows item info or any sort of data I layout, the last column is crunched to one character width when resizing to small. Example code in a 6-column cell is attached for code as well as the output screenshot.
Any ideas how I can fix this?
<table class="six columns">
<tr>
<td>
<table width="100%">
<tr>
<td>Subtotal</td>
<td>$60.00</td>
</tr>
<tr>
<td>Shipping & Handling</td>
<td>$11.91</td>
</tr>
<tr>
<td><strong>Grand Total</strong></td>
<td><strong>$71.91</strong></td>
</tr>
</table>
</td>
<td class="expander"></td>
</tr>
</table>
A Ink sub-grid would be useful here.
HTML
<table class="body">
<tr>
<td class="center" align="center" valign="top">
<div class="c1">
<table class="row">
<tr>
<td class="wrapper">
<table class="twelve columns">
<tr>
<td class="ten sub-columns">Subtotal</td>
<td class="two sub-columns last">$10</td>
<td class="expander"></td>
</tr>
</table>
</td>
</tr>
</table>
<table class="row">
<tr>
<td class="wrapper">
<table class="twelve columns">
<tr>
<td class="ten sub-columns">S&H</td>
<td class="two sub-columns last">$2</td>
<td class="expander"></td>
</tr>
</table>
</td>
</tr>
</table>
<table class="row">
<tr>
<td class="wrapper">
<table class="twelve columns">
<tr>
<td class="ten sub-columns">Total</td>
<td class="two sub-columns last">$12</td>
<td class="expander"></td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
Screenshot
Here's the demo.
I think Ink is only for creating responsive e-mail layouts. If you want something more, you can use standard HTML. So <table> with <tr>, <td> and <th>.

Placing image on bottom right corner of table cell does not work in Firefox and Safari

I have the following table structure in my aspx page. I need to place the image at bottom right corner of a table cell. The code below works fine for IE and Chrome. But in Firefox and Safari, the image is displayed at the bottom right corner of the row, and not the cell.
<table style="width:100%">
<tr>
<td valign="top" style="width:20%; position:relative">
<div>
//some controls here
</div>
<img src="~/images/Index.JPG" runat="server" style="position:absolute; right:0; bottom:0"/>
</td>
<td valign="top" style="width:80%">
<div>
//control here
</div>
</td>
</tr>
<tr>
<td align="center" colspan="1" style="width: 20%">
//control here
</td>
<td align="center" colspan="2" style="width: 80%">
</td>
</tr>
<tr>
<td align="center" style="width:100%" colspan="2">
//control here
</td>
</tr>
</table>
Please help with this!!
Thanks.
I solved this problem by adding another row for the image and setting its alignment.
<tr>
<td style="width: 20%;" align="right" valign="bottom">
<asp:Image ID="Img1" runat="server" />
</td>
</tr>
I think you need to remove the position:relative of the parent td for this image as the absolute of the images is done relative to the td that has the position:relative
<table style="width:100%">
<tr>
<td valign="top" style="width:20%;">
<div>
//some controls here
</div>
<img src="~/images/Index.JPG" runat="server" style="position:absolute; right:0; bottom:0"/>
</td>
<td valign="top" style="width:80%">
<div>
//control here
</div>
</td>
</tr>
<tr>
<td align="center" colspan="1" style="width: 20%">
//control here
</td>
<td align="center" colspan="2" style="width: 80%">
</td>
</tr>
<tr>
<td align="center" style="width:100%" colspan="2">
//control here
</td>
</tr>
</table>

Resources