Zum Inhalt springen
View in the app

A better way to browse. Learn more.

Fachinformatiker.de

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.

CSS gleiche Spaltenbreiten

Empfohlene Antworten

Veröffentlicht

Hallo zusammen,

gibt es eine Möglichkeit per CSS bei einer Tabelle eine Eigenschaft festzulegen, dass alle Spalten gleich groß sind ( unabhängig von der Spaltenanzahl...) ?

Danke und gruß,

Markus

ach hab noch was vergessen:

ich brauch noch ein style der mir folgendes bringt:

Ich möchte, dass das TD in dem sich der Link befindet die Hintergrundfarbe wechselt, wenn ich entweder über den Link fahre, oder über das TD fahre.

Das ganze möchte ich aber mit einem allgemeinen Style machen. Der style soll nicht klassen/id-bezogen sein

-----------------------------

UPDATE:

Alle TDs die aber keinen Link enthalten sollen diesen hover effekt nicht haben.

Es dürfen pseudo-klassen wie :hover usw. dazu auf alle möglichen ElementTypen benutzt werden

Es dürfen auch CSS3 Selektoren verwendet werden

huhu!

das erste problem klappt so(jedenfalls beim ie)

 td {[COLOR=DarkOrange]width:200; height:200;[/COLOR] font-size:9pt; color:#000000; font-family:Verdana,Tahoma,Helvetica,Arial; vertical-align:; text-align:left;} 

bei dem anderen muss ich nochma schaun

Hi kills!

Fang!


<style>

  table {

    table-layout: fixed;

    width: 100%;

  }

  td:hover {

    background-color: black;

    color: white;

  }

</style>

<table>

  <tr>

    <td>testtest</td>

    <td>test</td>

    <td>test</td>

    <td>test</td>

    <td>test</td>

    <td>testtesttesttest</td>

  </tr>

  <tr>

    <td>test</td>

    <td>testtest</td>

    <td>testtesttest</td>

    <td>test</td>

    <td>test</td>

    <td>test</td>

  </tr>

</table>

Beide Probleme in einem gelöst! Neues Problem: Falls der Inhalt einer Zelle zu lang ist ist alles vorbei.

Gruß, Tobias

Neues Problem: Falls der Inhalt einer Zelle zu lang ist ist alles vorbei.

Gruß, Tobias

das kann man aber umgehen mit overflow:D

beispiel:

<td cellspacing="5" style="width: 454px; height: 295px;" bgcolor="">

<div style="width: 452px; height: 293px; overflow : auto;">

dann wird das td scrollbar wenn zu viele daten drin sind!

stimmt! Hat aber zwei Nachteile:

  1. Du musst in jedes td ein div reinpacken
  2. Sieht ein blöd aus

:floet:

Hi kills!

Fang!


<style>

  table {

    table-layout: fixed;

    width: 100%;

  }

  td:hover {

    background-color: black;

    color: white;

  }

</style>

<table>

  <tr>

    <td>testtest</td>

    <td>test</td>

    <td>test</td>

    <td>test</td>

    <td>test</td>

    <td>testtesttesttest</td>

  </tr>

  <tr>

    <td>test</td>

    <td>testtest</td>

    <td>testtesttest</td>

    <td>test</td>

    <td>test</td>

    <td>test</td>

  </tr>

</table>

Beide Probleme in einem gelöst! Neues Problem: Falls der Inhalt einer Zelle zu lang ist ist alles vorbei.

Gruß, Tobias

Hey Tobias,

also das mit dem table-layout: fixed; hat mich schonma weitergebracht.

Das kannte ich noch nicht, aber man kann ja immer was neues lernen :)

Das mit dem hover ist ganz so einfach nicht.

Der hover soll nur bei Tds angezeigt werden die einen Link beinhalten!

Das mit den Inhalten passt schon. Ich geb die "Fest" an, die werden nicht durch usereingaben generiert.... ist nur im menu...

Danke und Gruß,

Markus

Achso, ok, wie wär's dann hiermit:


<style>

  table {

    table-layout: fixed;

    width: 100%;

  }

  a {

    display: block;

  }

  a:hover {

    background-color: black;

    color: white;

  }

</style>

<table>

  <tr>

    <td>testtest</td>

    <td>test</td>

    <td>test</td>

    <td>test</td>

    <td>test</td>

    <td>testtesttesttest</td>

  </tr>

  <tr>

    <td>test</td>

    <td><a href="">testtest</a></td>

    <td>testtesttesttesttesttes</td>

    <td>test</td>

    <td>test</td>

    <td>test</td>

  </tr>

</table>

das wars was ich gesucht hab:


a {

    display: block;

}

Danke !!

Gruß,

Markus

Archiv

Dieses Thema wurde archiviert und kann nicht mehr beantwortet werden.

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.