Vote count:
0
I have this code to generate a table. The problem is it gets broken on mobiles and tablets (Nexus 4, Nexus 7, ...). I think the table should have a layout when it scales to smaller viewport. How to display the table correctly on all devices?
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type='text/javascript' src='http://ift.tt/1otrNoq'></script>
<script type='text/javascript'>
$(document).ready(function(){
});
</script>
<style>
.div-table {
display:table;
width:auto;
border-spacing:5px; /*cellspacing:poor IE support for this*/
}
.div-table-header {
display:table-row;
width:auto;
clear:both;
}
.div-table-row {
display:table-row;
width:auto;
clear:both;
}
.div-table-col {
float:left; /*fix for buggy browsers*/
display:table-column;
width:96px;
overflow: hidden;
text-align: center;
vertical-align: middle;
}
.div-table .div-table-row:nth-child(even) {
background-color: #FFE9CB;
}
.div-table .div-table-row:nth-child(odd) {
background-color: #FFF;
}
.div-table .div-table-row {
border-top: 1px solid #FFB312;
border-bottom: 1px solid #FFB312;
}
.skillLabel {
text-align: right;
}
</style>
</head>
<div class="div-table">
<div class="div-table-header">
<div class="div-table-col"> </div>
<div class="div-table-col">Don't know</div>
<div class="div-table-col">Less than 1 year</div>
<div class="div-table-col">More than 1 year</div>
<div class="div-table-col">More than 2 year</div>
<div class="div-table-col">More than 3 year</div>
</div>
<div class="div-table-row">
<div class="skillLabel div-table-col">Java</div>
<div class="div-table-col"><input type="radio" class="skillRadioButton" name="jobman-field-9-SmF2YQ0=" value="0"></div>
<div class="div-table-col"><input type="radio" class="skillRadioButton" name="jobman-field-9-SmF2YQ0=" value="1"></div>
<div class="div-table-col"><input type="radio" class="skillRadioButton" name="jobman-field-9-SmF2YQ0=" value="2"></div>
<div class="div-table-col"><input type="radio" class="skillRadioButton" name="jobman-field-9-SmF2YQ0=" value="3"></div>
<div class="div-table-col"><input type="radio" class="skillRadioButton" name="jobman-field-9-SmF2YQ0=" value="4"></div>
</div>
<div class="div-table-row">
<div class="skillLabel div-table-col">PHP</div>
<div class="div-table-col"><input type="radio" class="skillRadioButton" name="jobman-field-9-UEhQDQ==" value="0"></div>
<div class="div-table-col"><input type="radio" class="skillRadioButton" name="jobman-field-9-UEhQDQ==" value="1"></div>
<div class="div-table-col"><input type="radio" class="skillRadioButton" name="jobman-field-9-UEhQDQ==" value="2"></div>
<div class="div-table-col"><input type="radio" class="skillRadioButton" name="jobman-field-9-UEhQDQ==" value="3"></div>
<div class="div-table-col"><input type="radio" class="skillRadioButton" name="jobman-field-9-UEhQDQ==" value="4"></div>
</div>
<div class="div-table-row">
<div class="skillLabel div-table-col">Javascript</div>
<div class="div-table-col"><input type="radio" class="skillRadioButton" name="jobman-field-9-SmF2YXNjcmlwdA0=" value="0"></div>
<div class="div-table-col"><input type="radio" class="skillRadioButton" name="jobman-field-9-SmF2YXNjcmlwdA0=" value="1"></div>
<div class="div-table-col"><input type="radio" class="skillRadioButton" name="jobman-field-9-SmF2YXNjcmlwdA0=" value="2"></div>
<div class="div-table-col"><input type="radio" class="skillRadioButton" name="jobman-field-9-SmF2YXNjcmlwdA0=" value="3"></div>
<div class="div-table-col"><input type="radio" class="skillRadioButton" name="jobman-field-9-SmF2YXNjcmlwdA0=" value="4"></div>
</div>
<div class="div-table-row">
<div class="skillLabel div-table-col">MySQL</div>
<div class="div-table-col"><input type="radio" class="skillRadioButton" name="jobman-field-9-TXlTUUwN" value="0"></div>
<div class="div-table-col"><input type="radio" class="skillRadioButton" name="jobman-field-9-TXlTUUwN" value="1"></div>
<div class="div-table-col"><input type="radio" class="skillRadioButton" name="jobman-field-9-TXlTUUwN" value="2"></div>
<div class="div-table-col"><input type="radio" class="skillRadioButton" name="jobman-field-9-TXlTUUwN" value="3"></div>
<div class="div-table-col"><input type="radio" class="skillRadioButton" name="jobman-field-9-TXlTUUwN" value="4"></div>
</div>
</div>
</body>
</html>
asked 24 secs ago
Aucun commentaire:
Enregistrer un commentaire