html - 格式化 CSS 表格和表单

Question

尝试格式化 CSS 表格时，例如:display: table; - 有没有办法让表格填充周围的表格。

 label {
   font: 1em "typewriter", sans-serif;
   /* width: 20em; */
 }

 label::after {
   content: " :";
 }

 input[type=text] {
   padding: 5px;
   border: 2px solid #ccc;
   /* width: 20em; */
   /* width: 100%;*/
 }

 input[type=submit] {
   font: 1.1em "typewriter", sans-serif;
   background: #e9ecdf;
   height: 30px;
   width: 100px;
   margin-top: 5px;
 }

 form {
   border: 2px solid green;
   padding: 10px;
   margin: 10px;
 }

 #my-table {
   display: table;
   background: #e9ecdf;
   padding: 10px;
   border: 2px solid red;
 }

 #my-table-row {
   display: table-row;
 }

 #my-table-cell-caption {
   display: table-caption;
   background: #e9ecdf;
   font: 1.4em "typewriter", sans-serif;
   text-align: center;
   margin-bottom: 6px;
   padding: 5px;
   border: 2px solid blue;
 }

 #my-table-cell-input {
   display: table-cell;
   /* border: 1px solid blue; */
   padding: 2px;
   background-color: light-grey;
 }

 #my-table-cell-label {
   display: table-cell;
   color: black;
   /* border: 1px solid blue; */
   padding: 5px;
   /* width: 100px; */
   text-align: right;
 }

 #gh-form-submit-button {
   display: inline;
 }

<h1>Form demo</h1>

<form>

  <div id='my-table'>

    <div id='my-table-cell-caption'>
      Person edit
    </div>

    <div id='my-table-row'>

      <div id='my-table-cell-label'>
        <label>First name</label>
      </div>

      <div id='my-table-cell-input'>
        <input type="text" name="fname"></input>
      </div>


      <div id='my-table-cell-label'>
        <label>Last name</label>
      </div>

      <div id='my-table-cell-input'>
        <input type="text" name="fname"></input>
      </div>

      <div id='my-table-cell-label'>
        <label>Field</label>
      </div>

      <div id='my-table-cell-input'>
        <input type="text" name="fname"></input>
      </div>


    </div>

    <div id='my-table-row'>
      <div id='my-table-cell-label'>
        <label>Field</label>
      </div>

      <div id='my-table-cell-input'>
        <input type="text" name="fname"></input>
      </div>

      <div id='my-table-cell-label'>
        <label>Field</label>
      </div>

      <div id='my-table-cell-input'>
        <input type="text" name="fname"></input>
      </div>

    </div>

    <div id='my-table-row'>

      <div id='my-table-cell-label'>
        <label>Field</label>
      </div>

      <div id='my-table-cell-input'>
        <input type="text" name="fname"></input>
      </div>


      <div id='my-table-cell-label'>
        <label>Field</label>
      </div>

      <div id='my-table-cell-input'>
        <input type="text" name="fname"></input>
      </div>

      <div id='my-table-cell-label'>
        <label>Field</label>
      </div>

      <div id='my-table-cell-input'>
        <input type="text" name="fname"></input>
      </div>


    </div>

  </div>

  <div id='gh-form-submit-button'>
    <input type='submit' value='SAVE'>
  </div>

  <div id='gh-form-submit-button'>
    <input type='submit' value='DELETE'>
  </div>


</form>


<hr>

<address><a href="mailto:gorhas@raditex.nu">gorhas</a></address>

The current layout

我要表格内容填充标签。

Answer 1

我不确定我是否正确理解了你的问题，但你是否尝试将这两行添加到你的#my-table？

#my-table {
  width: 100%;
  box-sizing: border-box;
}