title: Group of radio buttons inside table
body: <p>I'm trying to implement time table (for online record to a doctor). 
  My code is:</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="record-container"&gt;
          &lt;div class="time-container" style="padding-top:5px"&gt;
              &lt;div class="time-table btn-group" data-toggle="buttons"&gt;
                  &lt;div class="time-table-row"&gt;
                      &lt;div class="rec-time"&gt;&lt;label class="btn btn-block free-time"&gt;&lt;input type="radio"&gt;10:00&lt;/label&gt;&lt;/div&gt;
                      &lt;div class="rec-time"&gt;&lt;label class="btn btn-block free-time"&gt;&lt;input type="radio"&gt;11:00&lt;/label&gt;&lt;/div&gt;
                      &lt;div class="rec-time"&gt;&lt;label class="btn btn-block free-time"&gt;&lt;input type="radio"&gt;12:00&lt;/label&gt;&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="time-table-row"&gt;
                      &lt;div class="rec-time"&gt;&lt;label class="btn btn-block free-time"&gt;&lt;input type="radio"&gt;10:20&lt;/label&gt;&lt;/div&gt;
                      &lt;div class="rec-time"&gt;&lt;label class="btn btn-block busy-time disabled"&gt;&lt;input type="radio"&gt;11:20&lt;/label&gt;&lt;/div&gt;
                      &lt;div class="rec-time"&gt;&lt;label class="btn btn-block busy-time disabled"&gt;&lt;input type="radio"&gt;12:20&lt;/label&gt;&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="time-table-row"&gt;
                      &lt;div class="rec-time"&gt;&lt;label class="btn btn-block free-time"&gt;&lt;input type="radio"&gt;10:40&lt;/label&gt;&lt;/div&gt;
                      &lt;div class="rec-time"&gt;&lt;label class="btn btn-block free-time"&gt;&lt;input type="radio"&gt;11:40&lt;/label&gt;&lt;/div&gt;
                      &lt;div class="rec-time"&gt;&lt;label class="btn btn-block free-time"&gt;&lt;input type="radio"&gt;12:40&lt;/label&gt;&lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;&lt;!--time-table--&gt;
          &lt;/div&gt; &lt;!--time-container--&gt;
      &lt;/div&gt; &lt;!--record-container--&gt;
  &lt;/div&gt; &lt;!--container--&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.record-container {
    width: 100%;
    height: 440px;
   }
  .time-container {
    margin-left: 240px;
    height: 240px;
  }
  .time-table {
    display: table;
    width: 100%;
    height: 100%;
  }
  .time-table-row {
    display: table-row;
  }
  .rec-time {
    display: table-cell;
    width: 11%;
    vertical-align: bottom;
    padding: 5px 5px;
    font-family: 'Roboto', sans-serif;
    color: #fff;
  }
  .btn {
    font-size: 16px;
    font-weight: 180;
    width: 82px;
  }
  .free-time {
    background: #5ece52;
  }
  .busy-time {
    background: #de0000;
  }
  </code></pre>
  
  <p>The first problem is the appearance of the buttons. The second is that buttons aren't in the group.  I've found out that this is because of <code>&lt;div class="rec-time"&gt;</code>. 
  I've tried many layouts but I could not get to the table was same as it's now and with the group of radio buttons (that look like buttons). </p>
  
  <p>How to fix it?</p>
  
  <p>UPDATE: The second problem was really in the absence of the name and id attributes. As for the appearance of buttons, I've had to add an attribute <code>style="display:none"</code> to the element <code>&lt;input ...&gt;</code> to remove the icon of radio button.
  But I can't understand why the styles of parent elements (<code>display: table-row;</code> and <code>display: table-cell;</code>) affect so?</p>