上下两个table无法对齐

Posted 2023-05-16

我要在html上实现一个table，当table的数据超过一定行的时候，让他自动出来一个滚动条。我用<div style="overflow: auto; width: 899px; height: 253px; border:none"></div>. 就是用div分层可以让他旁边出现滚动条。但是滚动条出来的时候，它会连表头也一起滚动，我想让表头不动。因此我用了两个table，表头和表身个一个table。这样把div加在表身那个table上，就可以实现。
可是！！！出现一个问题，郁闷得很。就是表头和表身总是对不齐，只要表身的数据有变化，比如数据太长，表头和表身就错位了。调好后只要数据变了，有时候又会对不齐，没辙了。来请教高人。如何解决？（补充一下，我用了表的宽度我是固定死的，如果表身的某一格的数据超过宽度，我会让他的数据换行显示的）
我们公司不让用QQ。你有skype号吗？
我的skype号是：arashi_kin
不是说全英文时间会把表格拉长，就是输入了比较长的信息时候，那个单元格中的信息虽然会换行，但是那个格子的宽度就变了，和上面就对不齐了。

参考技术A 是不是全是英文的时间就会把表格拉长？
可以加我QQ122054024说明一下，我来帮你解决。

将元素与使用 display: table 的容器底部对齐

【中文标题】将元素与使用 display: table 的容器底部对齐

【英文标题】：Align element to bottom of container that uses display: table

【发布时间】：2014-09-04 11:10:24

【问题描述】：

我有 3 个盒子，它们需要具有相同的高度和不同的内容。我正在使用 display: table 来实现这一点。我需要将按钮垂直对齐到容器的底部。按钮宽度也可以改变。我无法成功让 vertical-align: bottom 正常工作。

http://codepen.io/simply-simpy/pen/kBaHt

<div id="cta-3-col" class="cta-3-col">
    <div class="container">
        <div class="cta">
            <figure>
                <img src="http://lorempixel.com/200/100/" >
                    <figcaption>
                        <h2>CTA 1</h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing </p>
                    </figcaption>
            </figure>
            <a href="#" class="btn " role="button">Follow<i></i></a>
        </div>
        <div class="cta">
            <figure>
                <img src="http://lorempixel.com/200/100/" >
                    <figcaption>
                        <h2>CTA 2</h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt magna aliqua sed do edunt ut labore et dolore magna aliqua. </p>
                    </figcaption>
            </figure>
            <a href="#" class="btn" role="button">Partner With Us<i></i></a>
        </div>
        <div class="cta">
            <figure>
                <img src="http://lorempixel.com/200/100/" >
                    <figcaption>
                        <h2>CTA 3</h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
                    </figcaption>
            </figure>
            <a href="#" class="btn" role="button">Learn<i></i></a>
        </div>
    </div>
</div>

.cta 
    background: #fff;
    display: table-cell;
    width: 270px;
    padding: 0 0 30px;
 
.cta-3-col 
    background: gray;
    text-align: center;
    border-spacing: 10px;
   
 .container 
    display: table;
    width: 1000px;
    margin: 0 auto;
  
.btn 
    background: blue;
    color: #fff;
    padding: 10px;

【问题讨论】：

我认为添加“position:relative;”会容易得多到容器，然后使用“位置：绝对；”到您的底部 px 值的按钮

@AlvaroMenéndez -- 按钮需要居中，并且宽度可变。所以，我不确定在这种情况下效果如何。

现在我使用绝对位置方法和jQuery来设置偏移量。如果有人有更好的方法（仅使用 CSS），请告诉我。

你不能将 Partner 包装在 DIV 中并进行文本对齐除了相对表格单元格的绝对位置之外的中心？

【参考方案1】：

您只需在现有类中更改/添加一些 CSS 属性，而无需添加额外的标记：

http://codepen.io/anon/pen/rFmxa

CSS：

.cta 
  background: #fff;
  display: table-cell;
  width: 270px;
  /*padding: 0 0 30px;*/
  padding: 0 0 4em;
  position: relative;


.cta-3-col 
  background: gray;
  text-align: center;
  border-spacing: 10px;


.container 
  display: table;
  width: 1000px;
  margin: 0 auto;


.btn 
  background: blue;
  color: #fff;
  padding: 10px;
  position: absolute;
  bottom: 0;
  margin-bottom: 1em;
  left: 50%;
 -webkit-transform: translateX(-50%); 
 -moz-transform: translateX(-50%);
 -ms-transform: translateX(-50%); 
 -o-transform: translateX(-50%);
 transform: translateX(-50%);

【参考方案2】：

这是更新后的CodePen。

大部分更改是将position:relative; 修饰符添加到.cta 类，然后为.btn 类提供以下规则：

  position:absolute;
  bottom:5px;
  left:50%;
  -moz-transform:translateX(-50%);
  -webkit-transform:translateX(-50%);
  transform: translateX(-50%);

这应该会为您解决问题。

【参考方案3】：

.cta 
    background: #fff; 
    display: table-cell;
    width: 270px;
    padding: 0 0 40px;
    position:relative;
 
.btn 
    background: blue;
    color: #fff; 
    padding: 10px; 
    position:absolute; 
    left:50%; 
    bottom:0; 
    -webkit-transform: translateX(-50%); 
    -moz-transform: translateX(-50%); 
    -ms-transform: translateX(-50%); 
    -o-transform: translateX(-50%); 
    transform: translateX(-50%);

【参考方案4】：

看看修改后的代码，没有复杂的转换翻译属性，它可以在包括 ols IE 在内的所有浏览器中运行！

相对于其他方法的优势：高效、快速、跨浏览器、简单！

代码笔YourSolution

修改后的css

---

 .cta 
        background: #fff;
        display: table-cell;
        width: 270px;
        padding: 0 0 30px;
        position:relative;
    

    .cta-3-col 
        background: gray;
        text-align: center;
        border-spacing: 10px;
        .container 
            display: table;
            width: 1000px;
            margin: 0 auto;
        
    

    p 
        margin:10px 0px 40px 0px;
    

    a.btn 
        position: absolute;
        bottom: 10px;
        left: 0;
        right: 0px;
        width: 64px;
        margin: auto;
        background: blue;
        color: #fff;
        padding: 10px;
    

【讨论】：

这不起作用，因为按钮必须是灵活的宽度。

【参考方案5】：

您只需要在下面添加额外的 css，它就会按照您的要求显示您的 html：

- .cta position:relative;
- .btn position:absolute;left:45%;bottom:0px;