Aligning tables or DIV in one ROW using HTML Css(使用HTMLCSS在一行中对齐表格或DIV)-6ren

Aligning tables or DIV in one ROW using HTML Css(使用HTMLCSS在一行中对齐表格或DIV)

转载作者：bug小助手更新时间：2023-10-25 10:40:57

I have a problem in which I can't align the two table in PREPARED BY: and CHARGE It's not necessary to make two tables I tried just div the PREPARED BY: but it doesn't work so I came up to make another table one is belong to the PREPARED BY: with the name below and the other one is the charge table to below until Grand Total , the purpose why I created two tables because I loop the other table if I merge them into one the PREPARED by table will be loop two and I avoid that, I tried aligning them but it doesn't work,

我有一个问题，我不能在Prepared By中对齐两个表：和Charge我试着做两个表只需div Prepared By：但它不起作用所以我来做另一个表一个属于Prepared By：下面有名字，另一个是Charge表到下面直到总计，我之所以创建两个表是因为我循环另一个表如果我将它们合并成一个Prepared By表将是循环二，我避免了，我试着对齐它们，但它不起作用，

The result must be like this image

结果必须如下图所示

What I've tried

我尝试过的东西

       
            .container-wrapper {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: flex-start;
                height: auto;
                padding-bottom: 50px;
                background-color: #cccccc;
              }
             
              .container {
                display: flex;
                justify-content: space-between;
                align-items: center;
                width: 100%;
                height: 5%;
                background-color: #f0f0f0;
                border-radius: 8px;
                box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
                margin-bottom: 20px;
                padding: 0 10px;
              }
             
              .print-button {
                background-color: #b2c2ce;
                color: white;
                border: none;
                border-radius: 4px;
                padding: 8px 12px;
                cursor: pointer;
                margin-right: 500px;
              }
             
              .container-body, .container-body2,.container-body3,.container-body4  {
                width: 210mm;
                height:auto;
                background-color: #ffffff;
                box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.5);
                display: flex;
                flex-direction: column;
                padding: 20px;
                position: relative;
                padding: 50px;
              }
              .appendix {
                position: absolute;
                top: 65px;
                right: 50px;
                font-size: 14px;
                font-style: italic;
              }
             
              table {
                border: 3px solid;
                border-collapse: collapse;
                width: 100%;
                margin-top: 40px;
              }
             
              th,
              td {
                border: 1px solid #000000;
                text-align: left;
                padding: 8px;
              }
             
              th {
                background-color: #f2f2f2;
              }
             
              .center-text {
                text-align: center;
                vertical-align: top;
              }
              .dvnumber {
                background-color:#c6e0b4;
                border:1.8px solid;
                font-size: 12px;
              }
              .align-u-left {
              text-align: left;
              vertical-align: top;
            }
             
              @media print {
                .container {
                  display: none;
                }
             
                .container-body, .container-body2,.container-body3,.container-body4{
                  background-color: #f0f0f0;
                  box-shadow: none;
                  width: 210mm;
                  height: 297mm;
                  margin-top: -30px;
                }
             
                .container h3 {
                  color: transparent;
                }
             
                .container-wrapper {
                  align-items: flex-start;
                }
             
                table {
                  margin-top: 15px;
                  border: 3px solid;
                }
             
                .appendix {
                  top: 45px;
                }
             
                /* Adjust font size for Disbursement Voucher in print */
                .center-text b {
                  font-size: 14px;
                }
                .dvnumber {
                  background-color: #c6e0b4 !important; /* Use !important to ensure it's applied */
                  color: black; /* Make sure text remains readable */
                  border: 1.8px solid;
                  font-size: 10px;
                }
        
                .container-body2,.container-body3,.container-body4 {
                  page-break-before: always;
                }
              }
             .innerTable{
               margin:0px;
               border-color:white;  
             }
             .lastRow{
               padding:0px;
             }
        
             .align-text-right{
              text-align: right;
             }
             .align-text-right{
              text-align: right;
             }
             .no-border{
              border: 0;
             }
        
             .footer {
              margin-top: 95%;
              
            }

   <div class="container-wrapper">
        <div class="container">
            <h3></h3>
            <button class="print-button" onclick="window.print()">Print</button>
          </div>

    <div class="container-body3">
        <span ><center>Test data test data tes est data test data tes TEST<br> Test / Test / Test<br> Test#  Test.0.dv_no  <br> for Date 8, 2023</center></span>
        <table >
          <thead></thead>
          <tbody>
            <tr >
              <td><b>CODE</b></td>
              <td><b>Account Number</b></td>
              <td><b>ID NUMBER</b></td>
              <td><b><center>NAME</center></b></td>
              <td><b>AMOUNT</b></td>
              <td><b>CHARGE</b></td>
              <td><b><center>PURPOSE</center></b></td>
            
            </tr>


            <tr>
              <td class="align-text-right" style="padding: 2;">214214214</td>
              <td class="align-text-right" style="padding: 4;">4214124</td>
              <td class="align-text-left" style="padding: 4;">214</td>
              <td  class="align-text-left" style="padding: 4;">4124</td>
              <td style="padding: 4;"><center> testt </center></td>
              <td class="align-text-left" style="padding: 4;"> emp.charges </td>
              <td class="align-text-left" style="padding: 4;"> emp.purpose </td>
            </tr>

           
            <tr >
              <td style="padding: 0;"></td>
              <td style="padding: 0;"><b>TOTAL</b></td>
              <td style="padding: 0;"></td>
              <td style="padding: 0;"></td>
              <td style="padding: 0;"><center><b> 50000 </b></center></td>
              <td style="padding: 0;"></td>
              <td style="padding: 0;"><center><b> 1 </b></center></td>
            </tr>
          </tbody>
        </table>


                  
        <table style="border: 0;">
          <tbody>
            <tr >
              <td style="width: 50px;border:0;"></td>
              <td style="width: 125px;border:0;"></td>
              <td style="width: 100px;border:0;"></td>
              <td style="width: 140px;border:0;"></td>
              <td style="width:80px;border:0;"></td>
              <td style="width:72px;border:0;"></td>
              <td style="border:0;"></td>
            
            </tr>
            <tr>
              <td style="font-size: 13px;padding: 0;" colspan="2" class="no-border">PREPARED BY:</td>
              
            </tr>
            <tr>
              <td class="no-border"></td>

            </tr>
            <tr>
                <td class="no-border"></td>
                <td class="no-border"><center><b><u>Lebron James</u></b></center></td>
            </tr>
            <tr>
                <td class="no-border"></td>
                <td class="no-border"><center>AO II</center></td>
            </tr>


          </tbody>
        </table>

        <table style="border: 0;">
          <tbody>
            <tr >
              <td style="width: 50px;border:0;"></td>
              <td style="width: 125px;border:0;"></td>
              <td style="width: 100px;border:0;"></td>
              <td style="width: 140px;border:0;"></td>
              <td style="width:80px;border:0;"></td>
              <td style="width:72px;border:0;"></td>
              <td style="border:0;"></td>
            
            </tr>
            <tr>

              <td class="no-border"></td>
              <td class="no-border" colspan="2"></td>
              <td style="font-size: 13px;background-color:rgb(158, 198, 255); padding: 0;" class="no-border"><b>CHARGE</b></td>
              <td style="font-size: 13px;background-color:rgb(158, 198, 255); padding: 0;" colspan="2" class="no-border"><b><center>Sum of AMOUNT</center></b></td>
            </tr>


              <tr >
                <td class="no-border"></td>
                <td class="no-border"></td>
                <td class="no-border"></td>
                <td style="padding: 0;" class="no-border"> 4214</td>
                <td style="padding: 0;"  class="no-border" colspan="2"><center> 4214214 </center></td>
            
              </tr>
            
            <tr>
              <td class="no-border"></td>
              <td style="font-size: 13px;padding: 0;" class="no-border"><center><b></b></center></td>
              <td class="no-border"></td>
              <td style="padding: 0;;background-color:rgb(158, 198, 255);" class="no-border"><b>GRAND Total</b></td>
              <td style="padding: 0;background-color:rgb(158, 198, 255);"  class="no-border" colspan="2"><center><b> 4214214 </b></center></td>
            </tr>
          </tbody>
        </table>

        
        <div class="footer">
          Cash Unit's Copy
        </div>
      </div>
      <br>
    </div>

更多回答

Have a look at what you are doing; you are first setting up width for each column by creating dummy tds with specified width, with last td to cover the remaining width (because table width is set to 100% so that it has to fill the width of parent). When you put table { width: 100%} each table will occupy 100% of parent width. So more than one table can't occupy a row (unless you decide to put one above another using properties like position: fixed or float).

看看您在做什么；您首先通过创建具有指定宽度的虚拟TD来设置每一列的宽度，最后一个TD覆盖剩余的宽度(因为表格宽度被设置为100%，所以它必须填充父列的宽度)。当您放置表格{Width：100%}时，每个表格将占用父宽度的100%。因此，多个表不能占据一行(除非您决定使用位置：FIXED或FLOAT之类的属性将一个表置于另一个表之上)。

Please check this also: stackoverflow.com/q/14278167/21598034 . But your code has other problems as well

也请查看：stackoverflow.com/q/14278167/21598034。但是您的代码还存在其他问题

Tables are not supposed to be used for layout purposes. If you want things align use a CSS grid.

表格不应用于布局目的。如果你想让东西对齐，使用一个css网格。

优秀答案推荐

To make two tables appear on same row, I suggest this method: Put those tables on a bigger table. But as I have mentioned in the comments you are using dummy tds for defining the width of a column. So I have removed unnecessary tds present on the first row.

要使两个表出现在同一行上，我建议使用此方法：将这些表放在更大的表上。但是，正如我在评论中提到的，您正在使用虚拟TD来定义列的宽度。因此，我删除了第一行中出现的不必要的TD。

.container-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  height: auto;
  padding-bottom: 50px;
  background-color: #cccccc;
}

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 5%;
  background-color: #f0f0f0;
  border-radius: 8px;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
  margin-bottom: 20px;
  padding: 0 10px;
}

.print-button {
  background-color: #b2c2ce;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 8px 12px;
  cursor: pointer;
  margin-right: 500px;
}

.container-body,
.container-body2,
.container-body3,
.container-body4 {
  width: 210mm;
  height: auto;
  background-color: #ffffff;
  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  padding: 20px;
  position: relative;
  padding: 50px;
}

.appendix {
  position: absolute;
  top: 65px;
  right: 50px;
  font-size: 14px;
  font-style: italic;
}

table {
  border: 3px solid;
  border-collapse: collapse;
  width: 100%;
  margin-top: 40px;
}

th,
td {
  border: 1px solid #000000;
  text-align: left;
  padding: 8px;
}

th {
  background-color: #f2f2f2;
}

.center-text {
  text-align: center;
  vertical-align: top;
}

.dvnumber {
  background-color: #c6e0b4;
  border: 1.8px solid;
  font-size: 12px;
}

.align-u-left {
  text-align: left;
  vertical-align: top;
}

table.myClass * { /*new*/
  border: 0;
}

table table tr { /*new*/
  height: 30px;
}

@media print {
  .container {
    display: none;
  }
  .container-body,
  .container-body2,
  .container-body3,
  .container-body4 {
    background-color: #f0f0f0;
    box-shadow: none;
    width: 210mm;
    height: 297mm;
    margin-top: -30px;
  }
  .container h3 {
    color: transparent;
  }
  .container-wrapper {
    align-items: flex-start;
  }
  table {
    margin-top: 15px;
    border: 3px solid;
  }
  .appendix {
    top: 45px;
  }
  /* Adjust font size for Disbursement Voucher in print */
  .center-text b {
    font-size: 14px;
  }
  .dvnumber {
    background-color: #c6e0b4 !important;
    /* Use !important to ensure it's applied */
    color: black;
    /* Make sure text remains readable */
    border: 1.8px solid;
    font-size: 10px;
  }
  .container-body2,
  .container-body3,
  .container-body4 {
    page-break-before: always;
  }
}

.innerTable {
  margin: 0px;
  border-color: white;
}

.lastRow {
  padding: 0px;
}

.align-text-right {
  text-align: right;
}

.align-text-right {
  text-align: right;
}

.no-border {
  border: 0;
}

.footer {
  margin-top: 95%;
}

<div class="container-wrapper">
  <div class="container">
    <h3></h3>
    <button class="print-button" onclick="window.print()">Print</button>
  </div>

  <div class="container-body3">
    <span><center>Test data test data tes est data test data tes TEST<br> Test / Test / Test<br> Test#  Test.0.dv_no  <br> for Date 8, 2023</center></span>
    <table>
      <thead></thead>
      <tbody>
        <tr>
          <td><b>CODE</b></td>
          <td><b>Account Number</b></td>
          <td><b>ID NUMBER</b></td>
          <td><b><center>NAME</center></b></td>
          <td><b>AMOUNT</b></td>
          <td><b>CHARGE</b></td>
          <td><b><center>PURPOSE</center></b></td>

        </tr>


        <tr>
          <td class="align-text-right" style="padding: 2;">214214214</td>
          <td class="align-text-right" style="padding: 4;">4214124</td>
          <td class="align-text-left" style="padding: 4;">214</td>
          <td class="align-text-left" style="padding: 4;">4124</td>
          <td style="padding: 4;">
            <center> testt </center>
          </td>
          <td class="align-text-left" style="padding: 4;"> emp.charges </td>
          <td class="align-text-left" style="padding: 4;"> emp.purpose </td>
        </tr>


        <tr>
          <td style="padding: 0;"></td>
          <td style="padding: 0;"><b>TOTAL</b></td>
          <td style="padding: 0;"></td>
          <td style="padding: 0;"></td>
          <td style="padding: 0;">
            <center><b> 50000 </b></center>
          </td>
          <td style="padding: 0;"></td>
          <td style="padding: 0;">
            <center><b> 1 </b></center>
          </td>
        </tr>
      </tbody>
    </table>


    <table style="border: 0;" class="myClass" cellspacing="0" cellpadding="0" width="100%">
      <tbody>
        <tr>
          <td>
            <table style="border: 0;">
              <tbody>
                <tr>
                  <td style="width: 50px;border:0;"></td>
                  <td style="width: 125px;border:0;"></td>
                  <td style="width: 100px;border:0;"></td>
                </tr>
                <tr>
                  <td style="font-size: 13px;padding: 0;" colspan="2" class="no-border">PREPARED BY:</td>

                </tr>
                <tr>
                  <td class="no-border"></td>
                  <td class="no-border">
                    <center><b><u>Lebron James</u></b></center>
                  </td>
                </tr>
                <tr>
                  <td class="no-border"></td>
                  <td class="no-border">
                    <center>AO II</center>
                  </td>
                </tr>


              </tbody>
            </table>
          </td>
          <td>
            <table style="border: 0;">
              <tbody>
                <tr>
                  <td style="width: 140px;border:0;"></td>
                  <td style="width:80px;border:0;"></td>
                  <td style="width:72px;border:0;"></td>
                  <td style="border:0;"></td>

                </tr>
                <tr>
                  <td style="font-size: 13px;background-color:rgb(158, 198, 255); padding: 0;" class="no-border"><b>CHARGE</b></td>
                  <td style="font-size: 13px;background-color:rgb(158, 198, 255); padding: 0;" colspan="2" class="no-border"><b><center>Sum of AMOUNT</center></b></td>
                </tr>


                <tr>
                  <td style="padding: 0;" class="no-border"> 4214</td>
                  <td style="padding: 0;" class="no-border" colspan="2">
                    <center> 4214214 </center>
                  </td>

                </tr>

                <tr>
                  <td style="padding: 0;;background-color:rgb(158, 198, 255);" class="no-border"><b>GRAND Total</b></td>
                  <td style="padding: 0;background-color:rgb(158, 198, 255);" class="no-border" colspan="2">
                    <center><b> 4214214 </b></center>
                  </td>
                </tr>
              </tbody>
            </table>
          </td>
        </tr>
      </tbody>
    </table>

    <div class="footer">
      Cash Unit's Copy
    </div>
  </div>
  <br>
</div>

I have tried to keep your original code as much as possible, but I have removed extra cells which cause extra columns.

我已经尽可能地保留了您的原始代码，但我已经删除了导致额外列的多余单元格。

更多回答

Just a little bit I tried to move a bit upward the AO II or being align to the GRAND Total can you make that? I mean there's no space between Lebron James and AO II?

只是一点点，我试着往上移动了一点，或者是向总分靠拢，你能做到吗？我的意思是勒布朗·詹姆斯和奥二世之间没有空间？

I have edited my answer. For aligning them I had to specify height of the tr on tables inside the bigger table.

我已经编辑了我的答案。为了对齐它们，我必须指定较大桌子内的桌子上的tr高度。

php - 调用成员函数 row() 错误 | $row = $query->row(); |代码点火器
首先我要说的是，我主要是一名 iOS 开发人员，最近才开始探索全栈开发的惊心动魄的冒险。我是 PHP 和 MySQL 的新手。话虽如此，我有一个问题，我希望需要一个直接的解决方案。我正在为一个拥有预
row - Janus GridEx : Add custom row and select a specific row
我的表单上有 GridEx 对象并且... 我想用 for...next 循环在其中添加一些项目。实际上我找不到任何方法来添加带有自定义数据的新行。我想在那个 GridEx 对象中选择一个特定的行。
Python Pandas : reusing row value to another row - lookup across row
我有以下数据框 df1 = DataFrame([['OBJ1', 10, 'BX', 'pool1', 'OBJ2'],['OBJ2', 0, '', '', 'OBJ1'],['OBJ3', 1
mysql : Previous Row data if data on another row is equal to data on current row
所以我有以下成员(member)历史表 User_ID | Start date | End Date | Type(0-7) | ---------------------------
mysql - SQL : combinig 2 rows into 1 row based on the first field in row
我不擅长sql。我查看了 stackoverflow，但似乎对我没有任何用处。所以，我正在寻求帮助。是否可以根据行中的第一个字段将 2 行合并为 1 行。我在 mysql 中执行此操作。我将展示示例
bootstrap-4 - Bootstrap Flex : What is the difference between row and flex-row, flex-sm-row 等
我了解 flex sm、md、lg 列的概念，但不了解应用于行的概念。弹性行有什么作用？ sm、md、lg 尺寸应用于弹性行时意味着什么？最佳答案简答 - .row只是网格的容器 col .然而，
mysql - SQL新手: How to compare all rows within a column to reflect how many rows are "cheaper/less than" the respective row?
我遇到麻烦的地方我相信我需要使用 COUNT；但是，我不知道如何将一行与同一列中的每一行进行比较，然后计算有多少行比相应行少/便宜。提前谢谢您! 这是我试图解决的官方问题: “使用示例架构，编写一条
sql : duplicate row and all related rows
我有以下 3 个相关表 Schools Departments Classes --------------- ------------------ --
python - 我不知道代码 "[:, row:row]"的含义
我有代码: g, g_err = data[:, 4:6].T 我不知道[:, 4:6]的含义尤其是第一个: .T 表示转置吗？最佳答案您有一个名为 data 的二维矩阵，您的代码从第一维获取所
javascript - row 事件在附加到 row 内元素的事件之前触发
我在行单击上附加了一个事件，在行内的复选框更改上附加了一个事件。如何防止首先触发行单击？ $(document).on('click', 'table tr', function() { con
sql-server - T-SQL : How to join tables without creating extra rows - need a one row to one row correspondance
我有一个场景，我需要连接两个 SQL 表并且正在为如何做而苦恼。假设在表 A 中我有这个: ColA ColB ColC ColD 45 55 17 45 45
When two cells A and B are in the same row, and cell A moves to a different row, is there a function to move cell B to the same row?(当两个单元格A和B在同一行，而单元格A移动到不同的行时，是否有将单元格B移动到同一行的函数？)
我用谷歌表格记录我们俱乐部的出席率。该表格链接到另一个谷歌表格，因此可以自动创建一个名字列表，并按字母顺序排序。在这张表格中，我还根据我们所做的活动，在人的名字旁边手动输入点数。。问题是，由于姓名列表
java - Row row = sheet.getRow(row Number) 即使 Excel 工作表中存在行，也会返回 java.lang.nullpointerexception。我正在使用 Apache POI
这个问题在这里已经有了答案: What is a NullPointerException, and how do I fix it? (12 个回答) 5年前关闭。编辑:我正在使用此代码读取 Ex
r - (函数(..., row.names = NULL, check.rows = FALSE, check.names = TRUE, : Arguments imply different number of rows: 1, 4, 5, 2
我是 R 的初学者。我希望你能帮助我解决我的问题。我的数据集中的文件名包含大量信息。我必须提取这些信息来创建单独的变量。首先我使用 splits <- t(as.data.frame(strspli
row - scipy.sparse : Set row to zeros
假设我有一个 CSR 格式的矩阵，将一行(或多行)设置为零的最有效方法是什么？下面的代码运行得很慢: A = A.tolil() A[indices, :] = 0 A = A.tocsr() 我不
r - 多行删除 : delete row depending on other row
我遇到了一个相当复杂的问题。我有一个包含三行的数据框:id、info 和 rownum。数据如下所示: id info row 1 a 1 1 b 2
javascript - `lookupIndex[row[lookupKey]] = row;` 是如何工作的？
我正在阅读learnjsdata.com并遇到了这种不熟悉的 JavaScript 语法。语法如下: lookupIndex[row[lookupKey]] = row; 有人知道这里发生了什么吗？我
mysql - mysql : Sum each row After Specific Row
我有一个表格，收集每周足球比赛的结果。根据每场比赛的结果，我根据 ID 为玩家输入 3、1 或 0 分，具体取决于他们是赢、平还是输。 id Name A1 B1 C1 A2 B2
MySQL : combine multiple row into one row
我有一个 mysql 表: 在表1中，我有3列:Bidang、Keahlian、Nilai。在 saran 列的表结果中，我想根据 bidang 组合 keahlian，但如果 nilai > 0，则
mysql - SQL : splitting a row in two rows
我有一个看起来像这样的表 | ID | item1 | item 2 | | 1 | A1 | B1 | | 2 | A2 |

bug小助手

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

Aligning tables or DIV in one ROW using HTML Css(使用HTMLCSS在一行中对齐表格或DIV)