Question

在我作为项目工作的网站上，我有table 3 columns，

Column 1: Artist
Column 2: Times Played this week
Column 3: Previous Plays

然后问题是table非常长，滚动到底部需要一点时间（好的，比用户提供的时间更长）。

我希望它在此布局中并且6 columns或两个单独的tables：

Column 1: Artist
Column 2: Times Played this week
Column 3: Previous Plays
(little space to break the 3 columns each side up)
Column 4: Artist
Column 5: Times Played this week
Column 6: Previous Plays

指向当前table的网页链接如下：

LINK

使用top的PHP代码生成table，其内容为：

<?php
$xml_data = file_get_contents('http://www.bbc.co.uk/programmes/music/artists/charts.xml');
$xml = new SimpleXMLElement($xml_data);
?>

<table>
<th>Artist</th>
<th>Times played this week</th>
<th>Previous plays</th>

<?php
foreach ($xml->artists->children() as $child)
{
  echo "<tr>";
  $artist = (string)$child->name;
  echo "<td>$artist</td>";
  $playedweek = (string)$child->plays;
  echo "<td>$playedweek</td>";
  $previousplays = (string)$child->previous_plays;
  echo "<td>$previousplays</td>"; 
  echo "</tr>";
}?>
</table>

我用于CSS的{{1}}是：

table

我试图包含您可能需要的所有必要代码。如果我遗失了某些东西，请根据要求添加。

我如何实现上述描述？

Answer 1

如果您可以选择将表替换为任何其他元素，那么：

将信息渲染为列表，然后为li元素赋予一个浮点数，左边为值，宽度为16.6％

e.g：

<?php
$xml_data = file_get_contents('http://www.bbc.co.uk/programmes/music/artists/charts.xml');
$xml = new SimpleXMLElement($xml_data);
?>

<ul>
<li>Artist</li>
<li>Times played this week</li>
<li>Previous plays</li>
<li>Artist</li>
<li>Times played this week</li>
<li>Previous plays</li>   
<?php
foreach ($xml->artists->children() as $child)
{
  $artist = (string)$child->name;
  echo "<li>$artist</li>";
  $playedweek = (string)$child->plays;
  echo "<li>$playedweek</li>";
  $previousplays = (string)$child->previous_plays;
  echo "<li>$previousplays</li>"; 
}?>
</ul>

CSS：

li
{
    float: left;
    width: 16.6%;
}

示例HTML @：http://jsfiddle.net/yT6P5/

Answer 2

两张桌子！找到你的表的长度（比如221），除以2和舍入，（111 ......取决于你使用的舍入方法），并在该数字处插入一些html来结束第一个表并开始第二个表：< / p>

if (@counter == 111) {
echo "</table>";
echo "<table>";
echo "  <tr>";
echo "    <th>Artist</th>";
echo "    <th>Times played this week</th>";
echo "    <th>Previous plays</th>";
echo "  </tr>";
}

稍微修改你的CSS，使表格与所需的间距相互接近：

table {
    text-align:center;
    float:left;
    margin-right:2em;
}

你应该被设定。

如何制作表6列/两个单独的表而不是3列

2 个答案: