MVC 的表格单元格高度无法更改

Question

我想为 MVC @foreach（模型中的变量项）（我可以）添加此表，我为 Dreamweaver 制作此表，但表单元格高度无法更改，我该怎么做？或者请给我一些表格结构/教程。 谢谢你

jsfiddle

HTML

    <table class="table">
    <tr>
        <th>
            First Name
        </th>
        <th>
            Last Name
        </th>
        <th>

        </th>
        <th>Edit</th>
    </tr>



        <tr>
            <td>
              jgfjfgj jjjjjjjjjjjjjjjjjjjjjjjjjj   jgfjfgj jjjjjjjjjjjjjjjjjjjjjjjjjj   jgfjfgj jjjjjjjjjjjjjjjjjjjjjjjjjj
            </td>
            <td>
              jgfjjjjjjjjjjjjjjjjjjj
            </td>
            <td>
            fgjfjjjjjjjjjjjjjjjjj
            </td>
            <td>
               gjj jjjjjjjjjjjjjjjjjjjjjjjjjj
            </td>
        </tr>


</table>

css

@media 
    only screen and (max-width: 560px),
    (min-device-width: 768px) and (max-device-width: 1024px)  {

        /* Force table to not be like tables anymore */
        table, thead, tbody, th, td, tr { 
            display: block;  width:250px;
        }

        /* Hide table headers (but not display: none;, for accessibility) */
        thead tr { 
            position: absolute;
            top: -9999px;
            left:-9999px; 
        }

        tr { margin-left:4px; }



        /*
        Label the data
        */
        td:nth-of-type(1):before { content: ""; }
        td:nth-of-type(2):before { content: ""; }
        td:nth-of-type(3):before { content: ""; }
        td:nth-of-type(4):before { content: ""; }
        td:nth-of-type(5):before { content: ""; }

        }

   /* Smartphones (portrait and landscape) ----------- */
    @media only screen
    and (min-device-width : 320px)
    and (max-device-width : 480px) {
        body { 
            padding: 0; 
            margin: 0; 
            width: 320px;  }
        }

    /* iPads (portrait and landscape) ----------- */
    @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
        body { 
            width: 495px; 
        }
    }tr:nth-of-type(odd) { 
        background:#eee;
    }
    th { 
        background: #333; 
        color: white; 
        font-weight: bold; 
    }
     th { 
        padding: 5px; height:10px; 
        border: 1px solid #ccc; 
        text-align: left;
    }
td {
height:5px;
        border: 1px solid #ccc; 
        text-align: left;



}

    Edit { color:black;}

Answer 1

你应该这样尝试，

  @media 
  only screen and (max-width: 560px),
  (min-device-width: 768px) and (max-device-width: 1024px)  {
  
    /* Force table to not be like tables anymore */
    table, thead, tbody, th, td, tr { 
      display: block;  width:250px;box-sizing: border-box;
    }
    
    /* Hide table headers (but not display: none;, for accessibility) */
    thead tr { 
      position: absolute;
      top: -9999px;
      left:-9999px; 
    }
    
    tr { margin-left:4px; }
       
    
  
    /*
    Label the data
    */
    td:nth-of-type(1):before { content: ""; }
    td:nth-of-type(2):before { content: ""; }
    td:nth-of-type(3):before { content: ""; }
    td:nth-of-type(4):before { content: ""; }
    td:nth-of-type(5):before { content: ""; }
    
    }

   /* Smartphones (portrait and landscape) ----------- */
  @media only screen
  and (min-device-width : 320px)
  and (max-device-width : 480px) {
    body { 
      padding: 0; 
      margin: 0; 
      width: 320px;  }
    }
  
  /* iPads (portrait and landscape) ----------- */
  @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
    body { 
      width: 495px; 
    }
  }tr:nth-of-type(odd) { 
    background:#eee;
  }
  th { 
    background: #333; 
    color: white; 
    font-weight: bold; 
  }
   th { 
    padding: 5px; 
    min-height:10px; 
    border: 1px solid #ccc; 
    text-align: left;
  }
td {
  min-height:5px;
    border: 1px solid #ccc; 
    text-align: left;
      


}

    Edit { color:black;}

 
</style>

<table class="table">
    <tr>
        <th>
            First Name
        </th>
        <th>
            Last Name
        </th>
        <th>
            
        </th>
        <th>Edit</th>
    </tr>
  
    <tr>
        <td>
          jgfjfgj jjjjjjjjjjjjjjjjjjjjjjjjjj   jgfjfgj jjjjjjjjjjjjjjjjjjjjjjjjjj   jgfjfgj jjjjjjjjjjjjjjjjjjjjjjjjjj
        </td>
        <td>
          jgfjjjjjjjjjjjjjjjjjjj
        </td>
        <td>
        fgjfjjjjjjjjjjjjjjjjj
        </td>
        <td>
           gjj jjjjjjjjjjjjjjjjjjjjjjjjjj
        </td>
    </tr>
  </table>