如何在html中的一页上将表格值分成两部分答案

【问题标题】：how to break table values in two portion on one page in html如何在html中的一页上将表格值分成两部分
【发布时间】：2021-03-14 18:07:27
【问题描述】：

如何在 html 中在一页上将表格值分成两部分需要在从 s.no 6 分成两部分后加载此表值上传示例图像页面越过它到打印视图中的第二页后发生了什么两天后卡住了，请帮忙

   ---------------------------
  |s.no | product | Qty |Price|
  -----------------------------

<!DOCTYPE html>
      <html>
       <head>

        </head>
       <body>

       <h2>HTML Table</h2>

  <table>
    <tr>
     <th>s.no</th>
     <th>product</th>
     <th>qty</th>
     <th>price</th>
    </tr>
     <tr>
       <td>1</td>
       <td>Maria Anders</td>
       <td>1</td>
       <td>110</td>
     </tr>
    <tr>
       <td>2</td>
        <td>Maria Anders</td>
       <td>2</td>
       <td>110</td>
    </tr>
       <tr>
 <td>3</td>
 <td>Maria Anders</td>
<td>1</td>
<td>110</td>
                </tr>
                         <tr>
                            <td>4</td>
                    <td>Maria Anders</td>
                    <td>1</td>
                    <td>110</td>
                        </tr>
                            <tr>
                              <td>5</td>
                              <td>Maria Anders</td>
                              <td>1</td>
                               <td>110</td>
                                 </tr>
                                   <tr>
                                     <td>6</td>
                                     <td>Maria Anders</td>
                                     <td>1</td>
                                     <td>110</td>
                                     </tr>
                                     <tr>
                                    <td>7</td>
                                    <td>Maria Anders</td>
                                    <td>1</td>
                                      <td>110</td>
                                    </tr>
                                    <tr>
                                    <td>8</td>
                                      <td>Maria Anders</td>
                                      <td>1</td>
                                      <td>110</td>
                                       </tr>
                                       <tr>
                                      <td>9</td>
                                     <td>Maria Anders</td>
                                     <td>1</td>
                                     <td>110</td>
                                       </tr>
                                     <tr>
                                     <td>10</td>
                                     <td>Maria Anders</td>
                                     <td>1</td>
                                      <td>110</td>
                                      </tr>
                                      <tr>
                                      <td>11</td>
                                      <td>Maria Anders</td>
                                     <td>1</td>
                                     <td>110</td>
                                     </tr>
                                      <tr>
                                      <td>12</td>
                                     <td>Maria Anders</td>
                                     <td>1</td>
                                    <td>110</td>
                                    </tr>
                                    <tr>
                                <td>13</td>
                                  <td>Maria Anders</td>
                                    <td>1</td>
                                  <td>110</td>
                                    </tr>
                                    <tr>
                                <td>14</td>
                              <td>Maria Anders</td>
                              <td>1</td>
                             <td>110</td>
                              </tr>
                               </table>

                                   </body>
                    </html>

从 s.no 6 分成两部分后需要加载此表值示例图像已上传两天后卡住了，请帮忙

【问题讨论】：

请通过删除模板消息（在此处输入图像描述）来解决您的问题。还要在此处发布数据而不是外部图像。显示您目前拥有的任何代码。
详情添加请查看
你为什么不创建两个表？

标签： html css html-table

【解决方案1】：

使用两个表格，将第一个向左浮动：

<!DOCTYPE html>
      <html>
       <head>
<style>
  table, th, td { border: 1px solid black; }
  table {  border-collapse: collapse; }
</style>
        </head>
       <body>

       <h2>HTML Table</h2>

  <table style="float: left">
    <tr>
     <th>s.no</th>
     <th>product</th>
     <th>qty</th>
     <th>price</th>
    </tr>
     <tr>
       <td>1</td>
       <td>Maria Anders</td>
       <td>1</td>
       <td>110</td>
     </tr>
    <tr>
       <td>2</td>
        <td>Maria Anders</td>
       <td>2</td>
       <td>110</td>
    </tr>
       <tr>
 <td>3</td>
 <td>Maria Anders</td>
<td>1</td>
<td>110</td>
                </tr>
                         <tr>
                            <td>4</td>
                    <td>Maria Anders</td>
                    <td>1</td>
                    <td>110</td>
                        </tr>
                            <tr>
                              <td>5</td>
                              <td>Maria Anders</td>
                              <td>1</td>
                               <td>110</td>
                                 </tr>
                                   <tr>
                                     <td>6</td>
                                     <td>Maria Anders</td>
                                     <td>1</td>
                                     <td>110</td>
                                     </tr>
</table>
<table>
                                     <tr>
                                    <td>7</td>
                                    <td>Maria Anders</td>
                                    <td>1</td>
                                      <td>110</td>
                                    </tr>
                                    <tr>
                                    <td>8</td>
                                      <td>Maria Anders</td>
                                      <td>1</td>
                                      <td>110</td>
                                       </tr>
                                       <tr>
                                      <td>9</td>
                                     <td>Maria Anders</td>
                                     <td>1</td>
                                     <td>110</td>
                                       </tr>
                                     <tr>
                                     <td>10</td>
                                     <td>Maria Anders</td>
                                     <td>1</td>
                                      <td>110</td>
                                      </tr>
                                      <tr>
                                      <td>11</td>
                                      <td>Maria Anders</td>
                                     <td>1</td>
                                     <td>110</td>
                                     </tr>
                                      <tr>
                                      <td>12</td>
                                     <td>Maria Anders</td>
                                     <td>1</td>
                                    <td>110</td>
                                    </tr>
                                    <tr>
                                <td>13</td>
                                  <td>Maria Anders</td>
                                    <td>1</td>
                                  <td>110</td>
                                    </tr>
                                    <tr>
                                <td>14</td>
                              <td>Maria Anders</td>
                              <td>1</td>
                             <td>110</td>
                              </tr>
                               </table>

                                   </body>
                    </html>

【讨论】：

我的表格数据在一个表格中动态显示只是想将表格数据分成左右两部分，因为我不想要第二页
要么像上面那样做（可能通过 javascript），要么如果你想要动态行为，可以使用 flexbox。

【解决方案2】：

您可以通过<td colspan="2"> 让一个项目使用 2 列。

欲了解更多信息：
https://www.w3schools.com/tags/att_td_colspan.asp

【讨论】：