Geek Answers Handbook

How to split a row by <td> in a flexible table

I have a table like this:

+----+----+----+----+----+----+
| A  | A  | B  | B  | C  | C  |
+----+----+----+----+----+----+

And I need to get this result on a small screen

+----+----+
| A  | A  |
+----+----+
| B  | B  |
+----+----+
| C  | C  |
+----+----+

Is it possible?

I want to use only css, no jquery. use display: property, td :: after how do i do this? How can i solve this?

 @media( max-width:640px) {
   #test, #test thead, #test tbody {} #test tr {
     /* ? */
   }
   #test th {
     /* ? */
   }
   #test td {
     /* ? */
   }
   #test td::after {
     /* ? */
   }
   #test tr {
     border-bottom: 1px solid #ddd;
   }
   #test th,
   #test td {
     border-top: none;
     border-bottom: none;
   }
 }
<table id="test" class="table">
  <tr>
    <th>A</th>
    <td>A</td>
    <th>B</th>
    <td>B</td>
    <th>C</th>
    <td>C</td>
  </tr>
  <tr>
    <th>D</th>
    <td>D</td>
    <th>E</th>
    <td>E</td>
    <th>F</th>
    <td>F</td>
  </tr>
</table>
Run code
+4
source share
2 answers

<table>and @medianot best friends.
<div>instead, there may be both display: block;, and display: table;if we want, so let rock

jsBin demo

*{box-sizing:border-box;-webkit-box-sizing:border-box;}html,body{height:100%;margin:0;}

.table{
  display: table;
  width: 100%;
  table-layout: fixed;
  border-left: 1px solid #444;
  border-top:  1px solid #444;
}
.tr{
  display: table-row;
}
.td,
.th{
  display: table-cell;  
  background: #eee;
  border-bottom: 1px solid #444;
  border-right: 1px solid #444;
}
.th{
  font-weight: bold;
}

@media(max-width:640px) {
  .table,
  .tr{
    display: block;
  }
  .th,
  .td{
    width: 50%;
    float: left;
  }
}
<div class="table">
  <div class="tr">
    <div class="th">A</div>
    <div class="td">A</div>
    <div class="th">B</div>
    <div class="td">B</div>
    <div class="th">C</div>
    <div class="td">C</div>
  </div>
  <div class="tr">
    <div class="th">D</div>
    <div class="td">D</div>
    <div class="th">E</div>
    <div class="td">E</div>
    <div class="th">F</div>
    <div class="td">F</div>
  </div>
</div>
Run code
+3
source

This is the use of bootstrap:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<div class="row">
  <div class="col-md-4 col-xs-12 text-center">
    <div class="col-md-2 col-xs-6">A</div>
    <div class="col-md-2 col-xs-6">A</div>
  </div>
  <div class="col-md-4 col-xs-12 text-center">
    <div class="col-md-2 col-xs-6">B</div>
    <div class="col-md-2 col-xs-6">B</div>
  </div>
  <div class="col-md-4 col-xs-12 text-center">
    <div class="col-md-2 col-xs-6">C</div>
    <div class="col-md-2 col-xs-6">C</div>
  </div>

</div>
Run code

<div> <table>. , bootstrap, .

0

More articles:


All Articles