Hoe een database tabel tonen in een Bootstrap tabel ?

Status
Niet open voor verdere reacties.
L

leifoet

Gebruiker
Lid geworden
7 okt 2007
Berichten
326
In een poging om een site responsive te maken met Bootstrap loop ik aan o.a. tegen dit probleem : hoe 'integreer' ik de bestaande Access-database in een Bootstrap-tabel ?
Grasduinen op het net levert mij niet onmiddellijk de bruikbare code op.
Graag een tip.
 
Het feit dat je een database gebruikt is niet een belangrijk gegeven voor je doelstelling om dit vervolgens in Bootstrap te verwerken. Bootstrap heeft niks met databases te maken, en is enkel bedoeld voor vormgeving.

Verdeel je doel in twee stappen:
1) Wat je wilt bereiken is juist dat je de inhoud van je access database kan uitlezen in je site. Op welke manier je dat kan doen is afhankelijk van de middelen die je ter beschikking hebt, waaronder de serverside programmeertaal. Vaak is dit PHP, maar op Windows-installaties is ASP.NET ook niet ondenkbaar.

2) Als je dit kan uitlezen, dan kan je dit als HTML-tabel in de Bootstrap verwerken.
 
Laatst bewerkt:
Krijg tabel intussen op het scherm -dank voor tip- maar blijf worstelen met bepaalde elementen van de bootstrap tabel-lay-out o.a.

1. hoe kan ik de rij-hoogte aanpassen = kleiner maken ?
padding al op 0 gezet
gevonden tablecodes tonen ca steeds de standaard (?) hoogte

2. hoe verwijder ik de grijze lijn tussen de rijen ?
alle bordercodes (als top en bottom) reeds op none gezet zonder gevolg
startcode tabel : <table class="table"> (in div class="container")

Dank voor tips.
 
Probeer dit eens in CSS?
Code: 
.topics tr { 
    overflow: hidden;
    height: 14px;
    white-space: nowrap;
}
 
Tabellen zijn niet de beste elementen voor een responsive website, ook niet in Bootstrap.
- Als de <table> smaller is dan alle <td> breedtes bij elkaar opgeteld dan krijg je een horizontale schuifbalk.
- Het stacking mechanisme (kolommen stapelen op smalle schermen) werkt niet in een table.

Het nadeel van een line-height op een tr is dat je het laatste deel van een wat langere tekst kwijtraakt.
Oorzaak: white-space en overflow zijn verplicht bij een line-height op de tr (zie oplossing van php4u)

Wil je in Bootstrap wel line-wrapping (meerdere regels in een cel mogelijk) dan wordt het
Code: 
.table th, .table td {
  padding: 0.1rem 0.75rem; /* standaard is dit 0.75rem 0.75rem */
  line-height: 1;  /* standaar is dit 1.5 */
}

In de html kan het ook, dan is de padding 0.3rem 0.3rem

<table class="table table-sm">
...
</table>
 
Over de responsiveness van tabellen in Bootstrap...
Standaard worden ze inderdaad met een overflow en dus een scrollbalk getoond. Niet echt handig. Op Tweakers zag ik een implementatie met waarbij de tabel niet horizontaal wordt vertoond, maar verticaal. Geen idee hoe dit eenvoudig kan met Bootstrap en wat jQuery, want het zag er best mooi uit.
 
Code voor verticale tabel weet ff niet meer waarvan ik hem heb

HTML: 
/*
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Table responsive Vertical</title>
</head>
<style>
/*
	Max width before this PARTICULAR table gets nasty. This query will take effect for any screen smaller than 760px and also iPads specifically.
	*/
	@media
	  only screen 
    and (max-width: 760px), (min-device-width: 768px) 
    and (max-device-width: 1024px)  {

		/* Force table to not be like tables anymore */
		table, thead, tbody, th, td, tr {
			display: block;
		}

		/* Hide table headers (but not display: none;, for accessibility) */
		thead tr {
			position: absolute;
			top: -9999px;
			left: -9999px;
		}

    tr {
      margin: 0 0 1rem 0;
    }
      
    tr:nth-child(odd) {
      background: #ccc;
    }
    
		td {
			/* Behave  like a "row" */
			border: none;
			border-bottom: 1px solid #eee;
			position: relative;
			padding-left: 50%;
		}

		td:before {
			/* Now like a table header */
			position: absolute;
			/* Top/left values mimic padding */
			top: 0;
			left: 6px;
			width: 45%;
			padding-right: 10px;
			white-space: nowrap;
		}

		/*
		Label the data
    You could also use a data-* attribute and content for this. That way "bloats" the HTML, this way means you need to keep HTML and CSS in sync. Lea Verou has a clever way to handle with text-shadow.
		*/
		td:nth-of-type(1):before { content: "First Name"; }
		td:nth-of-type(2):before { content: "Last Name"; }
		td:nth-of-type(3):before { content: "Job Title"; }
		td:nth-of-type(4):before { content: "Favorite Color"; }
		td:nth-of-type(5):before { content: "Wars of Trek?"; }
		td:nth-of-type(6):before { content: "Secret Alias"; }
		td:nth-of-type(7):before { content: "Date of Birth"; }
		td:nth-of-type(8):before { content: "Dream Vacation City"; }
		td:nth-of-type(9):before { content: "GPA"; }
		td:nth-of-type(10):before { content: "Arbitrary Data"; }
	}
	</style>

<body>
<table role="table">
  <thead role="rowgroup">
    <tr role="row">
      <th role="columnheader">First Name</th>
      <th role="columnheader">Last Name</th>
      <th role="columnheader">Job Title</th>
      <th role="columnheader">Favorite Color</th>
      <th role="columnheader">Wars or Trek?</th>
      <th role="columnheader">Secret Alias</th>
      <th role="columnheader">Date of Birth</th>
      <th role="columnheader">Dream Vacation City</th>
      <th role="columnheader">GPA</th>
      <th role="columnheader">Arbitrary Data</th>
    </tr>
  </thead>
  <tbody role="rowgroup">
    <tr role="row">
      <td role="cell">James</td>
      <td role="cell">Matman</td>
      <td role="cell">Chief Sandwich Eater</td>
      <td role="cell">Lettuce Green</td>
      <td role="cell">Trek</td>
      <td role="cell">Digby Green</td>
      <td role="cell">January 13, 1979</td>
      <td role="cell">Gotham City</td>
      <td role="cell">3.1</td>
      <td role="cell">RBX-12</td>
    </tr>
    <tr role="row">
      <td role="cell">The</td>
      <td role="cell">Tick</td>
      <td role="cell">Crimefighter Sorta</td>
      <td role="cell">Blue</td>
      <td role="cell">Wars</td>
      <td role="cell">John Smith</td>
      <td role="cell">July 19, 1968</td>
      <td role="cell">Athens</td>
      <td role="cell">N/A</td>
      <td role="cell">Edlund, Ben (July 1996).</td>
    </tr>
    <tr role="row">
      <td role="cell">Jokey</td>
      <td role="cell">Smurf</td>
      <td role="cell">Giving Exploding Presents</td>
      <td role="cell">Smurflow</td>
      <td role="cell">Smurf</td>
      <td role="cell">Smurflane Smurfmutt</td>
      <td role="cell">Smurfuary Smurfteenth, 1945</td>
      <td role="cell">New Smurf City</td>
      <td role="cell">4.Smurf</td>
      <td role="cell">One</td>
    </tr>
  </tbody>
</table>
</body>
</html>

Bootstrap werkt met een schuifbalk zover mij bekend zoals al aangegeven , wil je wat meer kunnen doen met je tabel kijk dan eens op
https://mottie.github.io/tablesorter/docs/
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan