我希望2个单元格内的文本在同一行开始

Question

我的桌子有点问题。 在我的第三行，我有2个单元格，其中有文本，但在其中一个文本较长，另一个文本较短..

有没有办法让文字在同一行开始而不添加/删除文字？

<div class="section2 center">
 <table>
    <tr>
        <th colspan="2">Our services</th>
    </tr>

    <tr>
        <th>Isolation and loneliness</th>
        <th>Family conflict or separation</th>
    </tr>

    <tr>
        <td>Human beings are naturally social animals. When we find 
         ourselves becoming isolated, we should take that as a warning sign 
         that we are turned against ourselves in some basic way. If not 
         already there, we are on a path toward feeling bad, lonely, 
         introverted or even depressed. Read more...</td>
        <td>Parental separation often initially leads to an increase in 
         parental conflict and anger, although for some families the level 
         of conflict reduces when parents do not see each other regularly. 
         Read more...</td>
    </tr>

    <tr style="height:5px"></tr>


    <tr>
        <th>Death of loss</th>
        <th>Child psychological program</th>
    </tr>

    <tr>
        <td>     There are many kinds of loss and each has its own kind of 
        grief. People lose loved ones like spouses, partners, children, 
        family members, and friends. Even pet losses can cause grief. job or 
        property loss can be painful. Read more...</td>
        <td>The basic premise of the program is that children who avoid 
        interactions with their peers or have difficulties in these 
        interactions do so because of a skill deficit or excessive anxiety. 
        Read more...</td>
    </tr>
</div>

    ---CSS---

.section2 table {
    align:center;
    margin-top:80px;
}

.section2 table tr:first-child>th {
   font-size:25px;
}

.section2 table tr:nth-child(3) {
   height:auto;
}


.section2 table tr:nth-child(3) td {
   width:200px;
   background-color:blue;
   padding:20px;
   text-align:center;
}

.section2 table tr:nth-child(6) td {
   padding:20px;
   text-align:center;
   background-color:red;
}

Answer 1

只需添加

.section2 table tr td {
    vertical-align: top;
}

代码。

小提琴：https://jsfiddle.net/32n2zjky/

Answer 2

您可以在vertical-align: top标记中使用td到head

<style>
  td {
    vertical-align: top;
  }
</style>

Answer 3

您想要添加

.section2 table tr {
     vertical-align: top;
}

顺便说一下，align:center应该text-align:center

＆＃13;

＆＃13;

.section2 table {
    text-align:center;
    margin-top:80px;
}

.section2 table tr {
     vertical-align: top;
}

.section2 table tr:first-child>th {
   font-size:25px;
}

.section2 table tr:nth-child(3) {
   height:auto;
}


.section2 table tr:nth-child(3) td {
   width:200px;
   background-color:blue;
   padding:20px;
   text-align:center;
}

.section2 table tr:nth-child(6) td {
   padding:20px;
   text-align:center;
   background-color:red;
}

＆＃13;

<div class="section2 center">
 <table>
    <tr>
        <th colspan="2">Our services</th>
    </tr>

    <tr>
        <th>Isolation and loneliness</th>
        <th>Family conflict or separation</th>
    </tr>

    <tr>
        <td>Human beings are naturally social animals. When we find 
         ourselves becoming isolated, we should take that as a warning sign 
         that we are turned against ourselves in some basic way. If not 
         already there, we are on a path toward feeling bad, lonely, 
         introverted or even depressed. Read more...</td>
        <td>Parental separation often initially leads to an increase in 
         parental conflict and anger, although for some families the level 
         of conflict reduces when parents do not see each other regularly. 
         Read more...</td>
    </tr>

    <tr style="height:5px"></tr>


    <tr>
        <th>Death of loss</th>
        <th>Child psychological program</th>
    </tr>

    <tr>
        <td>     There are many kinds of loss and each has its own kind of 
        grief. People lose loved ones like spouses, partners, children, 
        family members, and friends. Even pet losses can cause grief. job or 
        property loss can be painful. Read more...</td>
        <td>The basic premise of the program is that children who avoid 
        interactions with their peers or have difficulties in these 
        interactions do so because of a skill deficit or excessive anxiety. 
        Read more...</td>
    </tr>
</div>

 

＆＃13;

＆＃13;

＆＃13;