格式化一个css表

时间：2019-07-05 11:11:19

标签： html css

尝试格式化CSS表时，例如：display：table; -有什么办法让桌子填写周围的表格。

为了能够发布此问题，我被要求添加更多文本。 bit 代码显示了我的问题。那么为什么我必须添加很多虚拟文本呢？

 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

我希望表格内容填充标签。

3 个答案:

答案 0 :(得分：0)

我不确定我是否理解正确，但是您是否尝试将这两行添加到＃my-table中？

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

答案 1 :(得分：0)

也许将width: 100%添加到您的div中？还添加box-sizing:border-box，以便在宽度中包括填充。

此外，您在HTML中也遇到了一些问题。

  • 不允许重复id。例如，您正在使用 my-table-cell-label, gh-form-submit-button等， 一旦。请改用唯一的ID或class。
  • 不需要关闭input的标签。 input元素不接受 任何内容（例如img，例如），所以它是一个自动关闭
    元素：<input /> 

 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;
   box-sizing: border-box;
   width: 100%;
 }

 #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>

答案 2 :(得分：0)

在将宽度设置为100％的位置，您需要覆盖max-width属性。

max-width: 100% !important;
相关问题
最新问题