Question

我对网页设计很陌生，今年夏天我正在实习设计一个网站。我正在尝试为右侧和底部的表创建table，代码中的类名为“BroadCastSchedule”和“RightSearchBar”。

我无法发布图片，因为这是我的第一篇文章堆栈溢出，但是如果你运行代码，你可以看到表格的两个部分相距很远，我不能让它们在一起。< / p>

<!DOCTYPE html>

<html>

<head>

  <title>Channel 14 Schedule</title>

  <div class="img">
    <a href="https://www.ctv15.org"><img src="images/logo.png"></a>
  </div>

</head>

<style type="text/css">
  #navBar {
    height: auto;
    position: relative;
    bottom: 75px;
    left: 200px;
  }
  
  #menuli {
    margin: 0px;
    max-width: 450px;
  }
  
  li {
    display: inline-block;
    padding: 0.5em;
    font-family: sans-serif;
    color: gray;
  }
  
  h1,
  h2 {
    color: gray;
    font-size: 75%;
  }
  
  .searchBar {
    top: 200px;
  }
  
  .titleBox {
    position: relative;
    left: 400px;
    bottom: 75px;
  }
  
  .img {
    position: relative;
    left: 250px;
  }
  
  .RecentlyWatchedBar {
    position: relative;
    bottom: 575px;
    left: 200px;
  }
  
  .searchTool {
    position: relative;
    right: 200px;
  }
  
  .videoLink {
    /*Change size where the video is linked*/
    position: relative;
    left: 250px;
  }
  
  .RightSearchTable {
    position: relative;
    right: 75px;
    top: 100px;
  }
  
  .Calender {
    position: relative;
    margin-top: -75px;
    right: 75px;
  }
  
  .BroadcastSchedule {
    display: table-header-group;
    position: relative;
    table-layout: fixed;
    right: 350px;
    margin-right: -200px;
    padding-right: -200px
  }
  
  #h1FontSize {
    font-size: 150%;
    left: 700px;
  }
  
  #h2Location {
    position: relative;
    bottom: 20px;
  }
  
  input {
    position: relative;
    left: 1000px;
    bottom: 25px;
  }
  
  table,
  td {
    border: 1px solid black;
    position: relative;
    left: 1000px;
    bottom: 500px;
  }
</style>


<body background="images/bg.png">
  <div class="mainItemsDiv">

    <div class="titleBox">
      <h1 id="h1FontSize">Channel 14 Schedule</h1>
      <h2 id="h2Location"><i>Local Government And Sports</i></h2>

    </div>


    <div id="navBar">
      <ul id="menuli">
        <li><a href="http://www.ctv15.org/" style="color: #707070"><strong>Main</strong></a></li>
        <li><a href="http://www.ctv15.org/about" style="color: #707070"><strong>About</strong></a></li>
        <li><strong>Schedule</strong></li>
        <li><strong>Podcasts</li>
					<li>Search</li>
				</ul>

				<div class="searchTool">
					<input type="text" placeholder="search">
					<input type="button" value="Search">
				</div>

			</div>

			<div>

			<div class="videoLink">

				<iframe style="margin-top: -80px"width="657" height="400" src="https://www.youtube.com/embed/XxqcwGI6dOY" frameborder="0" allowfullscreen></iframe>

			</div>

			</div>

			<div class="RightSearchTable">

				<table width="225"; height="580">
					<tr>
						<th>Show Search
							<p>Roseville High School Concerts</p>
							<p>St. Anthony Football</p>
						</th>
					</tr>

				</table>



			</div>
			<div class="RecentlyWatchedBar">

				<p style= "color: #707070; text-indent: 50px">Recently Watched</p>

				<p>
					<ul>
						<li><iframe style="margin-top: 0px"width="150" height="110" src="https://www.youtube.com/embed/XxqcwGI6dOY" frameborder="0" allowfullscreen></iframe></li>
						<li><iframe style="margin-top: -80px"width="150" height="110" src="https://www.youtube.com/embed/XxqcwGI6dOY" frameborder="0" allowfullscreen></iframe></li>
						<li><iframe style="margin-top: -80px"width="150" height="110" src="https://www.youtube.com/embed/XxqcwGI6dOY" frameborder="0" allowfullscreen></iframe></li>
						<li><iframe style="margin-top: -80px"width="150" height="110" src="https://www.youtube.com/embed/XxqcwGI6dOY" frameborder="0" allowfullscreen></iframe></li>
					</ul>
				</p>
			</div>

			<div class= "Calender">
				<table width="225"; height="225">
					<th>
						<p>Calender tool will go here</p>
					</th>
				</table>

			</div>



			<div class="BroadcastSchedule">
					<table width="250"; height="100">
						<tr>
							<th>Date</th>
							<th>Location</th>
							<th>Start Time</th>
						</tr>
						<tr>
							<td>Date Data</td>
							<td>Location Data</td>
							<td>Start Time Data</td>
						</tr> 
					</table>

				<!--
				<table style="width:650px; height: 100px;">
	  				<tr><td>Firstname</td>Eve</tr>
	    				</th>
	    				<th>Lastname</th> 
	    					<td>Eve</td>
	    				<th>Points</th>
	    					<td>Eve</td>
	    			<tr>
	    				<th>Eve</th>
	    				<th>Jackson</th> 
	    				<th>94</th>
	  				</tr>
				</table>
				-->


			 </div>
		</div>
	</body>



</html>

Answer 1

您正在编辑表格数据而不是表格行。在你的css中改变这一行：

  table, td{
    //Do something
  }

对此：

  table, tr{
    //Do something
  }

并在我的网页上的不同位置

1 个答案: