表HTML溢出

时间:2012-07-17 02:28:25

标签: javascript html css html-table

我正在努力为我的网站制作一个更好看的会员名单。 http://www.pimpkings.com/memberlist

<table width="100%" rules="cols" border="1" cellspacing="2" cellpadding="1">
<colgroup span="5" </colgroup>
  <tr>
<td class="{memberrow.ROW_CLASS}" td align="center" width="200" valign="top" border="0" cellpadding="0">
<span class="gen"><a class="gen" href="{memberrow.U_VIEWPROFILE}">{memberrow.USERNAME}</a></span>
      <div class="avatar mini"><a href="{memberrow.U_VIEWPROFILE}">{memberrow.AVATAR_IMG}</a></div>
  <align="center" border="0" cellspacing="0" width="200">
    <center><font face="verdana" decoration="yes" size="2" color="white">Information</font></center>
    <br /><font face="verdana" size="1" color="green">Interest:</font>&nbsp;&nbsp;<br />
<span class="gen">{memberrow.INTERESTS}</span>
    <br /><font face="verdana" size="1" color="green">Join Date:</font> &nbsp;&nbsp; <br />
<span class="gensmall">{memberrow.JOINED}</span>
    <br /><font face="verdana" size="1" color="green">Last Visited:</font> &nbsp;&nbsp;  <br />
<span class="gensmall">{memberrow.LASTVISIT}</span>
    <br /><font face="verdana" size="1" color="green">Post Count:</font>&nbsp;&nbsp;  <br />
<span class="gen">{memberrow.POSTS}</span>
<align="right" border="0" cellspacing="2" width="200">
  <center> <br /><font face="verdana" size="2" color="green">Contact</font><br /></center>
&nbsp;{memberrow.PM_IMG}&nbsp;
&nbsp;{memberrow.WWW_IMG}&nbsp;
    </tr>
    </td>
    </body>

当我添加另一个

时出现问题
 <td>

它使它复制我正在调用的信息。我实际上会按照我说的方式制作代码,所以当你访问网站时,你会看到我在说什么。我只是不希望它复制任何成员信息。所以基本上

  1. 会员2.会员
  2. 会员4.会员
  3. 会员6.会员
  4. 我的意思

    不是

    1.Member 1.Member 2.Member 2.Member

    ...

    有可能做到这一点吗?我正在使用论坛网站,我可以访问CSS样式表以及此代码所在的位置。也许是一个Javascript代码???请尽快帮助我正在做的代码是一个开放的网站,但是很快就要开通的网站需要付费。拜托,谢谢大家。

    还有什么方法可以为成员背景表重复制作背景图像?

    我希望有3个列可以调用代码中列出的变量而不重复。

    再次感谢

2 个答案:

答案 0 :(得分:0)

你不应该使用表格。欢迎来到CSS浮动世界。这是一个闪亮的新例子:

<强> HTML

<ul class="tableHold">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>

<强> CSS

.tableHold {
    overflow: auto;
}

.tableHold li {
    float: left;
    width: 100px;
    border: 1px solid black;
}

Here's some more information on how things work. Here's a fiddle to play with.

答案 1 :(得分:0)

<强> HTML

<div class="tableHold">
  <div> 1  </div>
  <div> 2  </div>
  <div> 3  </div>
  <div> 4  </div>
  <div> 5  </div>
  <div> 6  </div>
</div>

<强> CSS

.tableHold {
  overflow: auto;
}

.tableHold div {
  float: left;
  width: 100px;
  border: 1px solid black;
}

http://codebins.com/bin/4ldqpak

上试试