如何在表格边框中使用宽度?

时间:2018-09-12 10:50:12

标签: html css

我正在尝试在论坛中实现cellpaddingcellspacing,但是我无法让width="100%"与之一起使用。

在CSS中使用cellpaddingcellspacing时是否可以设置宽度?

.categories div.category td tr{
   padding: 80px;
   width: 500px; 
}

echo '
  <table class="categories">
    <caption>Category: ', $row2['category'], '</caption>
    <thead>
      <tr>
        <td colspan="3">
          <th colspan="3"><a href="create_music_sub.php?cat='.$row2['id'].'&admin='.$row2['admin'].'">
            Click here to Create Sub Category
          </a></th>
        </td>
      </tr><tr>
        <div class="category"><th scope="col">Category</th></div>
        <th scope="col">Creator</th>
        <th scope="col">Date Created</th>
      </tr>
    </thead><tbody>';

1 个答案:

答案 0 :(得分:0)

如果您的意思是将表格的宽度设置为100%,则可以使用。 至于您提供的代码有错误:

  1. 当您想使用th时,请不要使用td
  2. div.category应该放在tr > th内,而不要包装它。
  3. 在发布问题时,请删除php片段,并为我们提供有用的提琴,以便能够更快地为您提供帮助。

请查看代码,以了解我做的不同。我认为问题出在您的html

table{
  border:1px solid black;
  width: 100%;
}

tr, th, td{
  border:1px solid black;
}

td,th{
  padding: 10px;
}

/*If you want the last column to be smaller you can change one of them to a certain width*/

.creator{
  width:20%;
}
<table class="categories">
	<caption>Category: 1</caption>
	<thead>
		<tr>
			<th colspan="3">
				<a href="">Click here to Create Sub Category</a>
			</th>
		</tr>
		<tr>
			<th scope="col">
				<div class="category">Category</div>
			</th>
			<th scope="col">Creator</th>
			<th scope="col">Date Created</th>
		</tr>
    
    <tr>
			<th colspan="2" scope="col">
				<div class="category">Category</div>
			</th>
			<th scope="col">Creator</th>
		</tr>
	</thead>
</table>


<table class="categories">
	<caption>Category: 1</caption>
	<thead>
		<tr>
			<th colspan="3">
				<a href="">Click here to Create Sub Category</a>
			</th>
		</tr>
		<tr>
			<th scope="col">
				<div class="category">Category</div>
			</th>
			<th scope="col">Creator</th>
			<th scope="col">Date Created</th>
		</tr>
    
    <tr>
			<th colspan="2" scope="col">
				<div class="category">Category</div>
			</th>
			<th scope="col" class="creator">Creator</th>
		</tr>
	</thead>
</table>