0

Using PHP & HTML, I have a table that I managed to make its cells scrollable by creating a div inside the cell and include the content of the cell in that div. The problem is that the scroll-bar is hiding part of the text in the cell. Both horizontal and vertical scroll bars do so. How can I solve this problem? Below is my code.

$account_holder= new AccountHolder;     
$result = $account_holder->view();

while($row= $result->fetch_row()) 
  {

  echo "<tr>";
  echo '<td align="center"> <div style="height: 50px;max-height: 50px; overflow: auto;">';echo $row[0] . "<div/></td>";                                         
  echo '<td align="center"> <div style="height: 50px;max-height: 50px; overflow: auto;">';echo $row[1] . "<div/></td>";
  echo '<td align="center"> <div style="height: 50px;max-height: 50px; overflow: auto;">';echo $row[2] . "<div/></td>";
  echo '<td align="center"> <div style="height: 50px;max-height: 50px; overflow: auto;">';echo $row[3] . "<div/></td>";
  echo '<td align="center"> <div style="height: 50px;max-height: 50px; overflow: auto;">';echo $row[4] . "<div/></td>";
  echo '<td align="center"> <div style="height: 50px;max-height: 50px; overflow: auto;">';echo $row[5] . "<div/></td>";
  echo '<td align="center"> <div style="height: 50px;max-height: 50px; overflow: auto;">';echo $row[6] . "<div/></td>";
  echo '<td align="center"> <div style="height: 50px;max-height: 50px; overflow: auto;">';echo $row[7] . "<div/></td>";
  echo '<td align="center"> <div style="height: 50px;max-height: 50px; overflow: auto;">';echo $row[8] . "<div/></td>";
  echo '<td align="center"> <div style="height: 50px;max-height: 50px; overflow: auto;">';echo $row[9] . "<div/></td>"; 
  echo '<td align="center"> <div style="height: 50px;max-height: 50px; overflow: auto;">';echo $row[10] ."<div/></td>";
  echo '<td align="center"> <div style="height: 50px;max-height: 50px; overflow: auto;">';echo $row[11] . "<div/></td>";
  echo '<td align="center"> <div style="height: 50px;max-height: 50px; overflow: auto;">';echo $row[12] . "<div/></td>";
  echo '<td align="center"> <div style="height: 50px;max-height: 50px; overflow: auto;">';echo $row[13] . "<div/></td>";
  echo "</tr>";

  }
4

1 回答 1

1

Try to add a padding to each div. 

echo '<td align="center"> 
<div style="padding: 15px; height: 50px;max-height: 50px; overflow: auto;">';
echo $row[13] . "<div/></td>";

Applying a class is a better way of solving this. 

<div class="container-scroll">

.container-scroll {
    height: 50px;
    max-height: 50px;
    overflow: auto;
    padding: 15px;
}
于 2013-06-27T07:25:01.603 回答