473,508 Members | 3,343 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Split table row into two rows without specifying height

KeredDrahcir
426 Contributor
I am trying to include a table on a mobile responsive design. The table only has two columns but on the lowest resolutions the table takes up too much horizontal space.
I'm quite happy to display the columns as two rows and I have a way to achieve this but it causes problems if one of the fields is long enough to go onto more than one line.

I can recode the table as divisions but I'd like to try and avoid that if possible.

Expand|Select|Wrap|Line Numbers
  1. <table width="100%" border="0" class="my_table">
  2.     <tr style="position: relative;">
  3.             <td>First Name </td>
  4.             <td>Sarah</td>
  5.           </tr>
  6.       <tr>
  7.           <td>Last Name </td>
  8.          <td>Bellum</td>
  9.     </tr>
  10.     <tr>
  11.               <td>Company Name</td>
  12.             <td>ABC Company Limited</td>
  13.           </tr>
  14. </table>
  15.  
The CSS that spilt the table is below
Expand|Select|Wrap|Line Numbers
  1. .my_table { position: relative;}
  2. .my_table tr { height: 50px; position: relative;}
  3. .my_table tr td:last-child { padding-top: 25px; position: absolute; left: 0;}
  4.  
I’d prefer not to recode the table into divisions if I can avoid it. Is there any way to do it without giving the table row a height so that it the last cell runs onto more than one line then it won't display over the next row?

Is there any other approach I can do?
Jan 27 '15 #1
0 1388

Sign in to post your reply or Sign up for a free account.

Similar topics

7
15984
by: Bruce W...1 | last post by:
I made my first PHP page that uses includes. http://php.didah.com/main.php But I can't get rid of a gap (about 5 pixels) between the table rows. The content of each include file is one line like...
12
39084
by: Rick DeBay | last post by:
I'm trying to create a layout table, where the spacing between rows varies. I've tried using setting margin-top and border-top for the rows I wan't spaced down from the one above, and I've also...
0
1018
by: namri | last post by:
Hi, I want to crypt a message with RSAPKCS1KeyExchangeFormatter with a RSAKey that I have. The only way that I see to do it is to get an initialize RSAPKCS1KeyExchangeFormatter with an instant...
3
2874
by: Bijoy Naick | last post by:
I have something strange going on.. My .aspx page contains a file upload control, a "Import Data" button, a "newTransactions" <asp:table>, a"SaveTrans" button and an confMsg label. First the...
1
1182
by: dananrg | last post by:
I can handle making the connections and running queries, but what's the best way to process table rows returned in Python? What about turning a table definition into an object? Just looking for...
7
13473
by: leiño | last post by:
Hi, i am adding table rows dynamically with javascript. This works fine. The table is inside a div with scrolls, initially with 6 rows: ..... <div style='overflow:auto; width:100%;...
6
9612
Vasuki Masilamani
by: Vasuki Masilamani | last post by:
Hi, I need a query which would convert Columns into Rows without causing any damages to the original data. I am not supposed to solve this by creating temporary tables and later dropping it. I...
0
1540
by: Ty | last post by:
Question: If the Division number changes in 1 table, it is suppose to automatically change in the other tables. If it don't change, what is the problem? Response: My professors response to my...
0
1469
by: geraldjr30 | last post by:
hi, i have the following: <html> <STYLE type="text/css"> TD{font-family:ARIAL;font-size:11px;color:#666666;}
1
1836
gskoli
by: gskoli | last post by:
Dear all Below i have given example of my HTML table structure Where two different <Td> are containing separate table both having same no. of rows but second table having some rows where...
0
7229
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
7129
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
7398
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
1
7061
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
1
5057
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...
0
4716
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and...
0
3208
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The...
0
3194
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
0
428
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.