Skip to content
View in the app

A better way to browse. Learn more.

Web Designer Forum

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Table Background with Col Width

Featured Replies

I am having a little problem with setting a background image for a table and also setting the columns widths. Here is a very dumbed down example. The image is a just a solid 16x16 color. I am using IE 7.

 

I would expect this to have the image vertically repeated on the left hand side of the first column; however, it is also inserting the image on the second column as well.

 

<html>
 <head>
   <style type="text/css">
     table {background-image: url("image.gif"); background-repeat=repeat-y;}
   </style>
 </head>
 <body>
   <table>
     <col width="100"/>
     <col width="150"/>
     <tr><td>Cell A1</td><td>Cell B1</td></tr>
     <tr><td>Cell A2</td><td>Cell B2</td></tr>
   </table>
 </body>
</html>

post-5865-1215203181_thumb.gif

Hi

The css will apply that style to the entire table.

 

<style type="text/css">
table {background-image: url("image.gif"); background-repeat=repeat-y;}
</style>

 

Pat

 

EDIT: background-repeat=repeat-y; should be background-repeat:repeat-y;

  • Author

That answer didn't make any sense to me so let me try to explain this in a different way. Why do these two sets of code act differently?

 

Edit: Not suprisingly, these two work the same as expected with Firefox; however, I need to get this working for IE7.

 

<html>
 <head>
   <style type="text/css">
     table {background-image: url("image.gif"); background-repeat:repeat-y;}
   </style>
 </head>
 <body>
   <table>
     <tr><td width="100">Cell A1</td><td width="150">Cell B1</td></tr>
     <tr><td width="100">Cell A2</td><td width="150">Cell B2</td></tr>
   </table>
 </body>
</html>

 

<html>
 <head>
   <style type="text/css">
     table {background-image: url("image.gif"); background-repeat:repeat-y;}
   </style>
 </head>
 <body>
   <table>
     <col width="100"/>
     <col width="150"/>
     <tr><td>Cell A1</td><td>Cell B1</td></tr>
     <tr><td>Cell A2</td><td>Cell B2</td></tr>
   </table>
 </body>
</html>

Create an account or sign in to comment

Account

Navigation

Search

Search

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.