CODEWITHSUNDEEP
htmlcsshtml-table
RCDAWebmaster
RCDAWebmaster

Reputation: 325

Using HTML tables on a mobile friendly site

I have a web page that I'm building which will house employee information for a church. There are 12 columns of data. The columns include:

Position
Name, City of residence
Edit Button
Checkbox for Religious Brother
Checkbox for Religious Sister
Checkbox for Lay Minister
Checkbox for Had VIRTUS Training
Checkbox for Had Background Check
Checkbox for Received Standard Code of Conduct
Checkbox for Received Technology/Social Media Policies
Checkbox for Received Youth Code of Conduct (if under 18)
Checkbox to Delete Employee

I originally had the site developed as a fixed width site and used an HTML table to display the information. When going to mobile friendly, I tried using DIVs to create my own table but couldn't get the fields in each row to maintain the same width and height.

Some research told me not to try and recreate the wheel so to speak. If a table is the best tool to display info, use one. I have done that, but the table will not compress below 700px wide and mobile devices like a phone zoom way out in order to fit the width of the page.

I would like the table to wrap the cells in each row after the edit button such that the check boxes move to a second line when the screen width gets small. I'm wondering if I should go back to and try to recreate the table using DIVs or if there is a way to get the table to wrap. What I can't grasp is getting all the DIVs on a row to maintain the same height and width and how to get all the DIVs in a column to have the same width. Maybe I should heed my own learning and try to use a table. I could nest two tables within each row such that the person's info is in one table and the check boxes are in another with the 2 side by side. This way the tables could reposition when the screen is not wide enough to display everything in one row. Nah. There would be no way to force height and width table to table without IDs and CSS. This would get messy as well.

Here is a copy of the code I tried which does wrap the second half of the row under the first half but does not look pretty:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.arial10pt{
    font-family:arial;
    font-size:10pt; 
}
.col1 {
    width:5%; !important;
    height:55px !important;
    vertical-align:middle !important;
    font-family:arial !important;
    font-size:10pt !important;  
}
.col2 {
    width:15% !important;
    vertical-align:middle !important;
    font-family:arial !important;
    font-size:10pt !important;  
}

.col3 {
    width:15%!important;
    vertical-align:middle !important;   
    font-family:arial !important;
    font-size:10pt !important;  
}
.col4 {
    width:5%; !important;
    vertical-align:middle !important;   
    font-family:arial !important;
    font-size:10pt !important;  
}
.col5 {
    width:10% !important;
    height:55px !important;
    font-family:arial !important;
    font-size:10pt !important;  
    vertical-align:middle !important;   
}
.col6 {
    width:10% !important;
    vertical-align:middle;  
    font-family:arial !important;
    font-size:10pt !important;  
}
.col7 {
    width:10% !important;
    vertical-align:middle !important;   
    font-family:arial !important;
    font-size:10pt !important;  
}
.col8 {
    width:10% !important;
    vertical-align:middle !important;   
    font-family:arial !important;
    font-size:10pt !important;  
}
.col9 {
    width:10% !important;
    vertical-align:middle !important;
    font-family:arial !important;
    font-size:10pt !important;  
}
.col9 {
    width:10% !important;
    vertical-align:middle !important;
    font-family:arial !important;
    font-size:10pt !important;  
}
.col10 {
    width:10% !important;
    vertical-align:middle !important;
    font-family:arial !important;
    font-size:10pt !important;  
}
</style>

</head>

<body>

 <div style="display:inline-table; width:39%; border:green 1px solid; padding:0; margin:0;" class="arial10pt">


        <table border="1" width="100%" cellspacing="0" cellpadding="0" class="arial10pt" >
        <tr>
        <td class="col1" style="padding:1px;"><strong>No Longer<br />with Parish</strong></td>
         <td class="col2" style="padding:1px;"><strong>Position</strong></td>
        <td class="col3" style="padding:1px;"><strong>Name, City</strong></td>
        <td class="col4" style="padding:1px;"></td>
        </tr>
        </table>
 </div>
  <div style="display:inline-table; width:59%; border:red 1px solid; padding:0; margin:0;" class="arial10pt">
        <table border="1" width="100%" cellspacing="0" cellpadding="0" class="arial10pt">
        <tr>
        <td class="col5" style="padding:1px;"><div style="text-align:center;" ><strong>Religious<br>Affiliation</strong></div></td>
        <td class="col5" style="padding:1px;"><div style="text-align:center;" ><strong>VIRTUS</strong></div></td>
        <td class="col6" style="padding:1px;"><div style="text-align:center; "><b>Background<br />Check</b></div></td>
        <td class="col7" style="padding:1px;" ><div style="text-align:center; "><strong>Standard Code <br />of Conduct</strong></div></td>
        <td class="col8" style="padding:1px;"><div style="text-align:center;"><strong>Technology / <br />Social Media</strong></div></td>
        <td class="col9" style="padding:1px;"><div style="text-align:center; "><b>Youth (under 18)<br />Code of Conduct</b></div></td>
        </tr>
        </table>
</div><br>
 <div style="display:inline-table; width:39%; border:green 1px solid; padding:0; margin:0;" class="arial10pt">



        <table border="1" width="100%" cellspacing="0" cellpadding="0">
        <tr>
        <td class="col1" style="padding:1px;">
            <div style="text-align:center;">
            <form method="Post" action="NLWP.aspx">
            <input type="checkbox" onclick="del(this.form)"/>
            <input type="hidden" value="20401" name="ID">
            </form>
            </div>
         </td>
         <td class="col2" style="padding:1px;">
            <div style="text-align:left;">Associate Pastor - Parochial Vicar</div>
         </td>
         <td class="col3" style="padding:1px;">
            Fr. John Jacob<br />Sometown
         </td> 
         <td class="col4" style="padding:1px;">
            <div style="text-align:center;">
            <form action="#popup1" method="post" data-toggle="modal">
            <input type="hidden" value="18294" name="people_ID"/>
            <input type="hidden" value="20401" name="parishPositions_ID"/>
            <input name="which" type="hidden" value="2" />
            <input type="submit" value="Edit"/>
            </form>
            </div>
        </td>
        </tr>
        </table>






</div>
 <div style="display:inline-table; width:59%; border:red 1px solid;  padding:0; margin:0;" class="arial10pt">
        <table border="1" width="100%" cellspacing="0" cellpadding="0">
        <tr>
        <td class="col5" style="padding:1px;">
            <div style="text-align:center;">
            Religious Brother
            </div>
        </td>
        <td class="col6" style="padding:1px;">
            <div style="text-align:center;">
            <input type="checkbox" checked = "checked" disabled="disabled"/> 
            <br />
            </div>
        </td>
        <td class="col7" style="padding:1px;">
            <div style="text-align:center;">
            <input type="checkbox" checked = "checked" disabled="disabled"/> 
            <br />
            </div>
        </td>
        <td class="col8" style="padding:1px;">
            <div style="text-align:center;">
            <input type="checkbox" checked = "checked" disabled="disabled"/> 
            </div>
        </td>    
        <td class="col9" style="padding:1px;">
            <div style="text-align:center;">
            <input type="checkbox" checked = "checked" disabled="disabled"/> 
            </div>
        </td>
        <td class="col10" style="padding:1px;">
            <div style="text-align:center; word-wrap: break-word;"> 
            <input type="checkbox"  disabled="disabled"/> 
            </div>
        </td>  
        </tr>
        </table>
</div><br>
 <div style="display:inline-table; width:39%; border:green 1px solid; padding:0; margin:0;" class="arial10pt">
        <table border="1" width="100%" cellspacing="0" cellpadding="0">
        <tr>
        <td class="col1" style="padding:1px;">
            <div style="text-align:center;">
            <form method="Post" action="NLWP.aspx">
            <input type="checkbox" onclick="del(this.form)"/>
            <input type="hidden" value="21874" name="ID">
            </form>
            </div>
        </td>
        <td class="col2" style="padding:1px;">
            <div style="text-align:left;">Deacon</div>
        </td>
        <td class="col3" style="padding:1px;">
            <div style="text-align:left;"> Deacon&nbsp;Tim Smith<br />Some City&nbsp;</div>
        </td> 
        <td class="col4" style="padding:1px;">
            <div style="text-align:center;">
            <form action="#popup1" method="post" data-toggle="modal">
            <input type="hidden" value="15778" name="people_ID"/>
            <input type="hidden" value="21874" name="parishPositions_ID"/>
            <input name="which" type="hidden" value="2" />
            <input type="submit" value="Edit"/>
            </form>
            </div>
         </td>
         </tr>
         </table>
</div>
 <div style="display:inline-table; width:59%; border:red 1px solid;  padding:0; margin:0;" class="arial10pt">
         <table border="1" width="100%" cellspacing="0" cellpadding="0">
         <tr>
         <td class="col5" style="padding:1px;">
            <div style="text-align:center;">
            Religious Brother
            </div>
        </td>
         <td class="col6" style="padding:1px;">
            <div style="text-align:center;">
            <input type="checkbox" checked = "checked" disabled="disabled"/> 
            <br />
            </div>
         </td>
         <td class="col7" style="padding:1px;">
            <div style="text-align:center;">
            <input type="checkbox" checked = "checked" disabled="disabled"/> 
            <br />4/8/2016
            </div>
         </td>
         <td class="col8" style="padding:1px;">
            <div style="text-align:center;">
            <input type="checkbox" checked = "checked" disabled="disabled"/> 
            </div>
         </td>    
         <td class="col9" style="padding:1px;">
            <div style="text-align:center;">
            <input type="checkbox" checked = "checked" disabled="disabled"/> 
            </div>
         </td>
         <td class="col10" style="padding:1px;">
            <div style="text-align:center;"> 
            <input type="checkbox"  disabled="disabled"/> 
            </div>
         </td>  
         </tr>
         </table>
</div>  
</body>
</html>

I am stumped.

Upvotes: 0

Views: 9767

Answers (2)

Dreamer64
Dreamer64

Reputation: 1179

For me If face such a problem and I'm short in time, I create 2 tables one targeting the big devices and another one for the small devices then just switch between them using @media and display: none or block. Maybe its not the best answer but just a workaround idea for lazy me which I can customize whatever I want in both big n small devices with very visible code super fast with no headache.

Upvotes: 1

Brady Ward
Brady Ward

Reputation: 134

Have you tried implementing bootstrap? You could use this:

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

For reference: https://www.w3schools.com/bootstrap/bootstrap_tables.asp

Upvotes: 0

Related Questions