Question

我试图创建一个简单的html表（一行到列）。我希望一列溢出滚动条。问题是，无论css设置是什么，我都会根据文本更改列大小的变化，滚动条是水平的而不是垂直的。需要改变什么才能让我的桌子成为我想要的方式？

Html代码：

<table class="homepage_table">
    <tr >
        <td id="Articlesbar" width="20%"  >
            <%@include file="newsData.jsp" %>

        </td>


        <td id="about_td" width="80%"  >
    <div class="fadein">
    <img src="imp.gif">
  <img src="http://thefinancialbrand.com/wp-content/uploads/2008/08/tagline-tagcloud.gif">
  <img src="slogan1.gif">

</div>

        <div id="about_text" width="100%" height= "100px" >     
                Founded in 1992 as a Finance and Securities Company, 
                Imperia Bank converted into a fully fledged commercial bank in January 1996. 
                Since then the bank has had a long standing tradition of achieving strong financial performance and carrying out 
                expansion strategies while successfully focusing on efficient client service delivery.<br><br>
                Over the last 20 years, Imperia Bank has achieved a sustained growth in our customer deposit base which is largely attributed to the level of confidence our customers have in the bank and our corporate strategy.
                Currently we have 23 branches in our expanding branch network across major towns and cities.<br><br>
                Imperial Bank will continue to enhance the existing risk management parameters through the effective use of our newly installed and cutting edge core banking system.
                As part of our growth strategy, we are also continuing to recruit qualified professional staff, and providing appropriate training to our existing human resources to ensure we continue to meet evolving customer demands.
        </div>
        </td>
    </tr>
</table>

以及（从jsp页面导入）：

    <div id= "newsHeader"><%=header %></div>
    <div id = "newsBody"><%=newsBody %></div>
    <div id = "newsDate"><%=date %></div>

    <br>

CSS代码：

.homepage_table
{
border: 250;
width: 100%;
height:500px;
margin:auto;
}
.homepage_table td
{
border:solid;

}
#about_td
{
background-image:url('http://www.promenadd.com/en/wp-content/uploads/2013/04/promenadd_grey_background.jpg');
background-repeat:no-repeat;
background-size: 110%;
font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
font-weight:bold;

}
#about_text
{

    padding-right: 50px;
    padding-left: 50px;
    color:steelblue;


}
#Articlesbar
{

 overflow-x: hidden;
overflow-y: scroll;
}

#newsHeader
{
font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
color:steelblue;
font-weight:bold;
font-size: 20px;
padding-right: 10px;
padding-left: 10px;
}

#newsBody
{
font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
color:red;
font-size: 14px;
padding-right: 10px;
padding-left: 10px;
}
#newsDate
{
font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
font-size: 14px;
padding-right: 10px;
padding-left: 10px;
}

Answer 1

我快速地把这个小提琴放在一起：

DEMO

我将此CSS添加到您的#about_text ID：

  max-height:200px;
  max-width:700px;
  overflow-y: scroll;

我不确定这是否是您想要的，但我认为它似乎可以满足您的需求。

您可以根据需要调整宽度/高度，overflow-y:scroll;可以显示滚动条。

Answer 2

我被击败了，但看起来海报想要文章栏上的滚动条

因此，简单的方法是在该td上设置一个高度，在其中添加一个div并将滚动条添加到其中。

结构就像

<table>
     <tr>
        <td>
           <div>
           </div>
        </td>
      </tr>
 </table>

here have a fiddle

html表列大小

2 个答案: